语法嵌套规则选择器嵌套
例如有这么一段css,正常CSS的写法
.container{width:1200px; margin: 0 auto;}.container .header{height: 90px; line-height: 90px;}.container .header .log{width:100px; height:60px;}.container .center{height: 600px; background-color: #F00;}.container .footer{font-size: 16px;text-align: center;}
改成写SASS的方法
.container{ width: 1200px; margin: 0 auto; .header{ height: 90px; line-height: 90px; .log{ width:100px; height:60px; } } .center{ height: 600px; background-color: #F00; } .footer{ font-size: 16px;text-align: center; }}
最终生成的格式:避免了重复输入父选择器,复杂的 CSS 结构更易于管理
父选择器&
在嵌套 CSS 规则时,有时也需要直接使用嵌套外层的父选择器,例如,当给某个元素设定 hover 样式时,或者当 body 元素有某个 classname 时,可以用 & 代表嵌套规则外层的父选择器。例如有这么一段样式:
.container{width: 1200px;margin: 0 auto;}.container a{color: #333;}.container a:hover{text-decoration: underline;color: #F00;}.container .top{border:1px #f2f2f2 solid;}.container .top-left{float: left; width: 200px;}
用sass编写
.container{ width: 1200px; margin: 0 auto; a{ color: #333; &:hover{ text-decoration: underline;color: #F00; } } .top{ border:1px #f2f2f2 solid; &-left{ float: left; width: 200px; } }}
属性嵌套
有些 CSS 属性遵循相同的命名空间 (namespace),比如 font-family, font-size, font-weight 都以 font 作为属性的命名空间。为了便于管理这样的属性,同时也为了避免了重复输入,Sass 允许将属性嵌套在命名空间中例如:
.container a{color: #333;font-size: 14px;font-family:sans-serif;font-weight: bold;}
用SASS的方式写
.container{ a{ color: #333; font: { size: 14px; family:sans-serif; weight:bold; } }}
注意font:后面要加一个空格
sass注释
Sass支持两种注释
标准的css多行注释 /* … */ 会编译到.css文件中单行注释 // 不会编译到.css文件
例如:
$version : "1.0.0";/* 首页相关css version:#{$version} */.container{ width: 1200px; .swiper{ // 网站幻灯片相关css width: 100%; height: 260px; .dot{ /* 幻灯片指示点 默认白色 选中时蓝色 */ width: 10px; height: 10px; border-radius: 50%; background-color: #FFF; &.active{ background-color: blue; } } }}
编译后:
@charset "UTF-8";/* 首页相关css version:1.0.0 */.container { width: 1200px; }.container .swiper { width: 100%; height: 260px; }.container .swiper .dot { /* 幻灯片指示点 默认白色 选中时蓝色 */ width: 10px; height: 10px; border-radius: 50%; background-color: #FFF; }.container .swiper .dot.active { background-color: blue; }/*# sourceMappingURL=index.css.map */