一:什么是css框架
二:特征
《less》
LESS 包含一套自定义的语法及一个解析器,用户根据这些语法定义自己的样式规则,这些规则最终会通过解析器,编译生成对应的 CSS 文件。LESS 并没有裁剪 CSS 原有的特性,更不是用来取代 CSS 的,而是在现有 CSS 语法的基础上,为 CSS 加入程序式语言的特性。
1.定义变量:
@符开头
例:
@width:100px;
@height:100px;
div{
width:@width;
height:@height;
}
css3属性,2.混合:
.bordered {border-top: dotted 1px black;border-bottom: solid 2px black; }
那如果我们现在需要在其他 class 中引入那些通用的属性集,那么我们只需要在任何 class 中像下面这样调用就可以了:
#menu a {color: #111;.bordered; } .post a {color: red;.bordered; }
.bordered
class 里面的属性样式都会在 #menu a
和 .post a
中体现出来:
#menu a {color: #111;border-top: dotted 1px black;border-bottom: solid 2px black; } .post a {color: red;border-top: dotted 1px black;border-bottom: solid 2px black; }
3.@arguments变量
@arguments包含了所有传递进来的参数。
.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {box-shadow: @arguments;-moz-box-shadow: @arguments;-webkit-box-shadow: @arguments; } .box-shadow(2px, 5px);
css组件?输出:
box-shadow: 2px 5px 1px #000; -moz-box-shadow: 2px 5px 1px #000;-webkit-box-shadow: 2px 5px 1px #000;
4.嵌套
LESS 可以让我们以嵌套的方式编写层叠样式。
css代码:
例:
#header { color: black; }#header .navigation { font-size: 12px; }#header .logo { width: 300px; }#header .logo:hover { text-decoration: none; }
/**********************************************/
less中的写发
#header { color: black;.navigation { font-size: 12px }.logo { width: 300px;&:hover { text-decoration: none }} }
5.运算及函数
在我们的 CSS 中充斥着大量的数值型的 value,比如 color、padding、margin 等,
@init: #111111; @transition: @init*2; .switchColor { color: @transition; }
CSS框架,经过编译生成的 CSS 文件如下:
.switchColor { color: #222222; }
6.Comments(注释)
适当的注释是保证代码可读性的必要手段,LESS 对注释也提供了支持,主要有两种方式:单行注释和多行注释,这与 JavaScript 中的注释方法一样,我们这里不做详细的说明,只强调一点:LESS 中单行注释 (// 单行注释 ) 是不能显示在编译后的 CSS 中,所以如果你的注释是针对样式说明的请使用多行注释。
《sass》
sass是一种CSS的开发工具,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护。
1. 变量
变量以$开头
例:
$blue : #1875e7; div {color : $blue;}如果变量需要镶嵌在字符串之中,就必须需要写在#{}之中。$side : left;.rounded {border-#{$side}-radius: 5px;}
css布局框架、2.计算
算式:body {margin: (14px/2);top: 50px + 100px;right: $var * 10%;}
3.嵌套
例:div h1 {color : red;}可以写成:div {hi {color:red;}}属性也可以嵌套:p {border-color: red;}可以写成:p {border: {color: red;}}
4. 注释
SASS共有两种注释风格。
标准的CSS注释 /* comment */ ,会保留到编译后的文件。
CSS布局。单行注释 // comment,只保留在SASS源文件中,编译后被省略。
5.继承
SASS允许一个选择器,继承另一个选择器。比如,现有class1:.class1 {border: 1px solid #ddd;} class2要继承class1,就要使用@extend命令:.class2 {@extend .class1;font-size:120%;}
6.条件语句
@if可以用来判断:
p {
@if 1 + 1 == 2 { border: 1px solid; }
@if 5 < 3 { border: 2px dotted; }
}
配套的还有@else命令:
@if lightness($color) > 30% {
background-color: #000;
} @else {
background-color: #fff;
}
7.循环
SASS支持for循环:@for $i from 1 to 10 {.border-#{$i} {border: #{$i}px solid blue;}} 也支持while循环:$i: 6;@while $i > 0 {.item-#{$i} { width: 2em * $i; }$i: $i - 2;}
&:代表当前父元素