less框架、sass框架和混合宏
less框架
@width: 200px; // 带参数的混入,括号中是参数,值可变 .margin(@value){ margin-bottom: @value; }
.box1{ width: @width; height: @width; background-color: red; // 引用带参数的混入,将变量直接赋值 .margin(10px); }
.box2{ // 将一个已声明好的类(.box1)作为声明给另一个元素(.box2) .box1; .margin(30px); }
// less 选择器支持嵌套,嵌套规则与 HTML 文档节点相同 #home{ color : blue; width : 600px; height : 500px; border:outset; #top{ border:outset; width : 90%; } #center{ border:outset; height : 300px; width : 90%; #left{ border:outset; float : left; width : 40%; } #right{ border:outset; float : left; width : 40%; } } } li{ background-color: red; &:hover{ background-color: yellow;
} }
sass框架
<!-- sass 和 scss 都是 sass ,
只是 sass 是老版本的语法,缩进要求严格,没有{}和;,后缀以 .sass ;
scss 是 sass 的新语法,后缀以 .scss 结尾 -->
$HHWidth: 250px; .box1{ //注意冒号后面的空格 width: $HHwidth; //所有的简写属性都可以这样书写,内边距、外边距、background、font等 border:{ top:1px solid red; right:2px dashed yellow; } } .box1{ width:$HHwidth; }
混合宏
// 声明混合宏 @mixin 关键字声明 @mixin margin{ margin-bottom: 10px; background-color: red; }
// 带参数的混合宏 @mixin padding($value){ padding: $value; } // 继承,先声明一个基础(公用)样式块 .globalStyle{ width: 200px; height: 50px; outline: none; }
// 占位符 如果没有元素调用 % 的样式,css 文件中不会有 % 的代码块 %beitai{ width: 200px; height: 50px; outline: none; }
.box1{ width: $width; height: $width; // 注意冒号后面的空格 // 所有简写属性都可以这样书写 内外边距、backgroud、font 等 border: { top: 1px solid red; right: 2px dashed yellow; } // 调用混合宏 关键字 @include + 类名 @include margin; @include padding(10px); } .box2{ width: $HHWidth - 150px; @include padding(20px); } input[type="text"]{ border: 1px solid red; // 调用继承:关键字 @extend + 类名 , 继承的样式会以并集选择器的形式存在在 CSS 文件中 // @extend .globalStyle; @extend %beitai; } input[type="password"]{ border: 1px solid green; // @extend .globalStyle; @extend %beitai; }