Sass类继承:

Sass类继承:,sass,compass-sass,Sass,Compass Sass,使用Sass和Compass,我想导入一个字体文件,但有3种不同的大小。但这个问题比这更基本,下面的代码是一个示例,我认为可能是这样的,但不确定sass类继承是否可以工作。对于这样的事情,最好的做法是什么 差不多 @include font-face("Kingthings Kelltika",font-files("http://www.fontsaddict.com/fontface/kingthings-kelltika.ttf")); .Kingthings { font-fam

使用Sass和Compass,我想导入一个字体文件,但有3种不同的大小。但这个问题比这更基本,下面的代码是一个示例,我认为可能是这样的,但不确定sass类继承是否可以工作。对于这样的事情,最好的做法是什么

差不多

@include font-face("Kingthings Kelltika",font-files("http://www.fontsaddict.com/fontface/kingthings-kelltika.ttf"));
.Kingthings {
    font-family:"Kingthings Kelltika";
    .small{
            font-size:.7em;
     }
.medium{
            font-size:.1em;
     }
.large{
            font-size:2em;
     }
}
<div class= "Kingthings small">
然后在html中说

@include font-face("Kingthings Kelltika",font-files("http://www.fontsaddict.com/fontface/kingthings-kelltika.ttf"));
.Kingthings {
    font-family:"Kingthings Kelltika";
    .small{
            font-size:.7em;
     }
.medium{
            font-size:.1em;
     }
.large{
            font-size:2em;
     }
}
<div class= "Kingthings small">

您的选择器将永远无法访问您定义它们的方式:

下面是一个简单的方法来完成您想要的任务:

如果你想使用SASS为你的选择器提供某种层次结构,它看起来像这样

<div class= "Arial">
    <div class="font-sm">Sample Text1</div>
    <div class="font-md">Sample Text1</div>
    <div class="font-lg">Sample Text1</div>
</div>  

.Arial   { font-family:"Arial"; 
    .font-sm { font-size:.7em; }
    .font-md { font-size:1em; }
    .font-lg { font-size:2em;  }
}