
正文
sass03 变量、样式导入
提示:扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
demo1.scss
@import "css.css"; //导入css文件
@import "http://ss/xx"; //导入css文件
@import url(css.css); //导入css文件
@import "a.scss"; //导入scss文件$fontsize:14px ;
$fontsize:12px !default;//变量后面的值会覆盖前面的值,默认值$paddings: 5px 10px 5px 10px;//多值变量$maps: (color:red,borderColor:blue);//多值变量$className:main;//特殊变量
$text-info:lightgreen;//特殊变量body{
$color:red !global; //定义全局变量,以便后面的footer可以访问到,
color:$color;
font-size:$fontsize;
padding:$paddings;
padding-left:nth($paddings, 2);//下标从1开始}
footer{
color:$color;
background-color:map-get($maps,borderColor);
}
.#{$className}{//使用main变量
width:50px;
}.text-info{
color:$text-info;
}
编译后的demo1.css
@import url(css.css);
@import "http://ss/xx";
@import url(css.css); //导入css文件原样输出
head { //导入scss文件,会把scss文件的代码编译出来
width: 100px; }body {
color: red;
font-size: 14px;
padding: 5px 10px 5px 10px;
padding-left: 10px; }footer {
color: red;
background-color: blue; }.main {
width: 50px; }.text-info {
color: lightgreen; }/*# sourceMappingURL=demo1.css.map */
a.scss
head{
width:100px;
}








