我们一起学SASS
写在前面
sass大约是4年前(2011年)的新技术,sass官网有详细介绍,包括安装指南、学习教程、语法细节文档等等,很全面也很清晰
为什么有必要学sass?因为很多前端自动化工具都用sass,比如京东的JDF、淘宝的KISSY都支持sass,在实际产品的开发中,sass用得很多,而且sass语法很简单,学习成本不高
至于sass与less,其实差异不是很大,功能相似,只是在语法细节上有差别。而且就功能而言,sass要略强于less,所以看看sass肯定是不亏的
一.sass是什么?
据官方说法,sass(Syntactically Awesome Style Sheets)是一种css扩展语言
我们知道的css只是一种标记语言,缺乏可编程特性,比如不支持变量、函数、逻辑流控制等等,缺乏这些特性使得css代码不易维护和修改,而sass就是要给css扩展这些可编程特性
类似的东西还有less和stylus,三者的区别请查看开源中国社区:为您详细比较三个 CSS 预处理器(框架):Sass、LESS 和 Stylus
二.sass与scss的区别
scss(Sassy CSS)是新版sass,其实区别不大,主要在语法格式上有差异:sass不需要花括号和分号,用缩进表示嵌套关系,仅此而已
P.S.一般都用scss格式的,可能是因为更容易从css格式过渡过来
三.sass具体语法
P.S.此处给出完整测试代码,细节都在注释里,建议打开sass在线编辑,把下面的代码粘过去,与生成的css代码对比理解
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 | // 1 .这个注释编译后就没了 /* 2.这个注释编译后还在,但压缩后就没了 */ /*! * 3.这个注释压缩后都在,用来说明重要信息,比如版权声明 */ /* 引用a.scss文件,合并编译结果 */ //@import "path/a" ; // 因为没有a.scss,所以会报错 /* 引用普通css文件,编译为@import url(...) */ @import "path/a.css" ; /* * 可以用嵌套结构表示后代 * 可以用@at-root跳出所有嵌套,感觉没什么用,只会把代码变得更混乱 */ div { h 2 { color : white ; // 属性也可以嵌套,但要注意属性名后面的冒号 border : { color : red ; width : 1px ; }; } } /* 可以用&引用外层元素 */ a { span { &:hover { color : red ; } span { // 无法引用外外层元素 // 直接用&&会报错,若用空格隔开则生成a span span a span span // 没什么意义 & &:hover{ color : red ; } } } } /* 变量的声明及使用 */ $myFontSize : 14px ; $ attr : color; $arr : 3 2 1 ; // 一维数组 $arr 2 : 10 20 , 30 40 ; // 二维数组 $map : (myWidth : 30px , myHeight : 50px ); // 映射 // 使用变量 h 1 { font-size : $myFontSize; // 属性值替换 border-#{$ attr } : red ; // 属性名替换 border-width : nth($arr, 3 ); // 取第 3 个元素 width : nth(nth($arr 2 , 2 ), 1 ); // 取arr[ 1 ][ 0 ] height : map-get($map, myHeight); } /* 变量作用域 */ $myValue : 1 ; $gValue : 1 ; // 测试变量作用域 .test { $myValue : 2 ; $gValue : 2 !global; // 全局变量 width : $myValue; height : $gValue; } .test 2 { width : $myValue; height : $gValue; } /* 混合的声明及使用 */ @mixin m_noArgs { width : 100px ; height : 100px ; } @mixin m_hasArgs($w, $h) { width : $w; height : $h; } @mixin m_hasDefaultArgs($w, $h : 100px ) { width : $w; height : $h; } @mixin m_hasManyArgs($m, $p, $w : 100px , $h : 100px ) { margin : $m; padding : $p; width : $w; height : $h; } @mixin m_hasGroupArgs($ts...) { // 参数个数不确定,比如渐变,阴影 text-shadow : $ts; } // 使用 h 1 { /* 传入参数多了少了都报错 */ @include m_noArgs; @include m_hasArgs( 100px , 200px ); @include m_hasDefaultArgs( 50px ); @include m_hasDefaultArgs( 50px , 50px ); @include m_hasManyArgs($p : 3px , $m : 5px ); // 带名传参,不用管顺序 @include m_hasGroupArgs( 0 1px 0 #777 , 0 -1px 0 #000 ); } /* 继承 */ // 父类 . super { color : red ; } // 子类 . sub { // 继承父类属性 @extend . super ; // 子类属性 background-color : white ; } /* 占位符选择器%,不调用就不编译生成css,避免继承产生多余的css */ %header { // 不会生成css color : red ; } %footer { color : red ; } // 调用 .myFooter { @extend %footer; } /* 函数 */ /* 调用库函数 */ $myColor 1 : darken( #00f , 20% ); // 加深 20% $myColor 2 : lighten( #00f , 20% ); // 减淡 20% p { color : $myColor 1 ; background : $myColor 2 ; } /* 自定义函数 */ @function add($arg 1 , $arg 2 ) { @return $arg 1 + $arg 2 ; // 注意return前面要有@ } h 1 { font-size : add( 10px , 20px ); } /* 运算 */ // 支持+、-、*、/、() .test { //width : 12px + 1em ; //报错,单位不匹配 color : #000 - #fff ; color : #ccc + #eee ; } /* 条件语句 */ $color : true; h 1 { @if ($color == true){ //没有===操作符,和js不一样 color : red ; } @else if ($color){ //if前不加@,加了报错 //... } @else { //... } } // 还有三目判断if($condition, $if_true, $if_false)但意义不大 /* for循环 */ @for $i from 1 to 3 { // 注意:to表示[ 1 , 3 ),through表示[ 1 , 3 ] .item-#{$i} { width : 20px * $i; } } /* each循环 */ $arr : top , right , bottom , left ; $arr 2 : 10 20 , 20 30 ; $map : (h 1 : 3em , h 2 : 2em , h 3 : 1em ); div { @each $item in $arr { // 遍历一维数组 border-#{$item} : 1px solid red ; } } p { @each $tb, $lr in $arr 2 { // 遍历二维数组 outline : $tb, $lr; border : $tb, $lr; } } @each $h, $em in $map { // 遍历map #{$h} { font-size : $em; } } // 参考资料:http://www.w 3 cplus.com/sassguide/syntax.html |
如下图:
如果不喜欢这种看代码说话的方式,可以查看W3CPlus:sass语法,提供了图文并茂的讲解
P.S.个人更喜欢看代码说话,因为代码简单明了,没废话,如果代码示例恰到好处的话就更好了
四.在线资源
-
sass官网:最标准,最权威
-
W3CPlus:有一篇很详尽的入门文章,图文并茂(上面也提到了)
-
sass在线编辑器:不想装ruby,还要用sass,用它就对了
-
RubyInstaller:Windows下装不了ruby?这里有好用的exe
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
· .NET Core内存结构体系(Windows环境)底层原理浅谈
· C# 深度学习:对抗生成网络(GAN)训练头像生成模型
· .NET 适配 HarmonyOS 进展
· 手把手教你更优雅的享受 DeepSeek
· AI工具推荐:领先的开源 AI 代码助手——Continue
· 探秘Transformer系列之(2)---总体架构
· V-Control:一个基于 .NET MAUI 的开箱即用的UI组件库
· 乌龟冬眠箱湿度监控系统和AI辅助建议功能的实现