标签:默认值 default 使用 code mixin imp ber 1.5 生成
sass的导入(@import
)规则和CSS的有所不同,编译时会将@import
的scss文件合并进来只生成一个CSS文件。
但是如果你在sass文件中导入css文件如@import ‘reset.css‘
,那效果跟普通CSS导入样式文件一样,导入的css文件不会合并到编译后的文件中,而是以@import
方式存在。
所有的sass导入文件都可以忽略后缀名.scss
。一般来说基础的文件命名方法以_开头,如_mixin.scss
。这种文件在导入的时候可以不写下划线,可写成@import "mixin"
。
例子:
a.scss:
body { background: #eee; }
需要导入样式的sass文件b.scss:
@import "reset.css"; @import "a"; p{ background: #0982c1;}
转译出来的b.css样式:
@import "reset.css";
body { background: #eee; }
p{ background: #0982c1;}
/*
*我是css的标准注释
*设置body内距
*/
body{
padding:5px;
}
单行注释跟JavaScript语言中的注释一样,使用又斜杠(//
),但单行注释不会输入到CSS中。
//我是双斜杠表示的单行注释 //设置body内距 body{ padding:5px; //5px }
sass的变量必须是$开头,后面紧跟变量名,而变量值和变量名之间就需要使用冒号(:)分隔开(就像CSS属性设置一样),如果值后面加上!default则表示默认值。
定义之后可以在全局范围内使用。
$fontSize: 12px;
body{ font-size:$fontSize; } ==》 body{font-size:12px}
sass的默认变量仅需要在值后面加上!default
即可。
$baseLineHeight: 1.5 !default;
body{ line-height: $baseLineHeight; } ==》 body{ line-height:1.5; }
sass的默认变量一般是用来设置默认值,然后根据需求来覆盖的,覆盖的方式也很简单,只需要在默认变量之前重新声明下变量即可
$baseLineHeight: 2;
$baseLineHeight: 1.5 !default;
body{ line-height: $baseLineHeight; } ==》 body{ line-height:2; }
一般我们定义的变量都为属性值,可直接使用,但是如果变量作为属性或在某些特殊情况下等则必须要以#{$variables}
形式使用。
$borderDirection: top !default;
$baseFontSize: 12px !default;
$baseLineHeight: 1.5 !default;
//应用于class和属性
.border-#{$borderDirection}{
border-#{$borderDirection}:1px solid #ccc;
} ==》 .border-top{ border-top:1px solid #ccc; }
//应用于复杂的属性值
body{
font:#{$baseFontSize}/#{$baseLineHeight};
} ==》 body { font: 12px/1.5; }
标签:默认值 default 使用 code mixin imp ber 1.5 生成
原文地址:http://www.cnblogs.com/vs1435/p/6599074.html