SCSS其实就是SASS新语法, 增强了对CSS3语法的支持
1.变量(Variables)
/*声明变明*/ $color: #333; $bgcolor:#f36; /*引用变量*/ body { body color: $color;}
2.嵌套(Nesting)
// 选择器的嵌套
// 传统css写法 section { margin: 10px; } section nav { height: 25px; } section nav a { color: #0982c1; } section nav a:hover { text-decoration: underline; } // scss写法 section{ margin: 10px; nav{ height: 25px; a{ color: #0982c1; &:hover{ text-decoration: underline;} } } }
// 属性嵌套
// 传统css写法 li { font-style: italic; font-family: serif; font-weight: bold; font-size:1.2em; } // scss写法 li{ font:{ style: italic; family: serif; weight: bold; size:1.2em; } }
3.Mixins ==> Mixins是SASS中最强大的特性之一, 简单点来说,Mixins可以将一部分样式抽出,作为单独定义的模块,被很多选择器重复使用, 每个都写在选择器里
// 格式 @mixin name($参数名:参数值){ /*样式规则*/ } // 简单的实例 @mixin error($borderWidth:2px){ border: $borderWidth solid #f00; color: #f00; } // @include调用mixin /*直接调用error Mixins*/ .generic-error { @include error(); } /*调用error Mixins,并将$borderWidth参数重定义为3px*/ .login-error { @include error(3px); } 老的语法中还支持另一种调用Mixins的方法。就是使用+ .generic-error +error() .login-error +error(3px)
3.选择器继承(Selector Inheritance) ==> SASS可以从一个选择器继承另一个选择器下的所有样式。共用属性
%block { margin: 10px 5px; padding: 2px; } p { @extend %block; border: 1px solid #eee; } h1{ @extend %block; color:red; }
// 编译出来的CSS p{ border: 1px solid #eee; } h1{ color:red; } p, h1{ margin: 10px 5px; padding: 2px; }
© 著作权归作者所有
举报
发表评论
0/200