首页 > 代码库 > sass03 变量、样式导入
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; }
sass03 变量、样式导入
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。