预处理语言的诞生Sass、Less 、Stylus
- Sass 诞生于 2007 年，Ruby 编写，其语法功能都十分全面，可以说 它完全把 CSS 变成了一门编程语言。另外 在国内外都很受欢迎，并且它的项目团队很是强大 ，是一款十分优秀的预处理语言。
- Stylus 诞生于 2010 年，来自 Node.js 社区，语法功能也和 Sass 不相伯仲，是一门十分独特的创新型语言。
- Less 诞生于 2009 年，受Sass的影响创建的一个开源项目。 它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充（引用于官网）
安装less
在命令行 使用npm安装
npm install -g less
编译成普通css文件
$ lessc styles.less > styles.css
声明变量
以 @ 开头 定义变量，并且使用时 直接 键入 @名称。
-
值变量
/* less */
@color:#999;
@bgColor:red;
#app{
color: @color;
@bgColor;
} -
选择器变量
/* Less */
@mySelector: #wrap;
@Wrap: wrap; // 页面上有名为wrap的选择器
@{mySelector}{ //变量名 必须使用大括号包裹
color: #999;
width: 50%;
}
.@{Wrap}{ //给class为wrap的选择器添加样式
color:#ccc;
}
#@{Wrap}{//给id为wrap的选择器添加样式 等价与 #wrap
color:#666;
}
/* 生成的 CSS */
#wrap{
color: #999;
width: 50%;
}
.wrap{
color:#ccc;
}
#wrap{
color:#666;
} -
属性变量
减少代码书写量
@images:'./assets/';
@borderStyle: border-style;
@Soild:solid;
#wrap{
@{borderStyle}: @Soild;//变量名 必须使用大括号包裹
}
.img{
background: url("@{images}xxx.jpg");
}
- 变量作用域
就近原则
@a:#000;
.a{
@b:#666;
color:@b;
}
.b{
color:@b; //这里并不会获取到.a内的@b变量
}
- 变量运算
/* less */
@width:300px;
@color:#222;
#wrap{
width:@width-20;
height:@width-20*5;
margin:(@width-20)*5;
color:@color*2;
+ #111;
}
/* 生成的 CSS */
#wrap{
width:280px;
height:200px;
margin:1400px;
color:#444;
}
嵌套
Less 提供了使用嵌套（nesting）代替层叠或与层叠结合使用的能力。假设我们有以下 CSS 代码：& ：代表的上一层选择器的名字，此例便是header
#header {
color: black;
&:after{
content:"hello Less";
}
}
#header .navigation {
font-size: 12px;
}
#header .logo {
width: 300px;
}
用 Less 语言我们可以这样书写代码：
#header {
color: black;
.navigation {
font-size: 12px;
}
.logo {
width: 300px;
}
}
混合方法
定义方法
.card(@bgColor:red){ //不使用的话不会在样式表中存在
width: 300px;
height: 200px;
background: @bgColor;
}
/* 也可以这样 */
.card{ // 这种写法会在样式中留下痕迹
width: 300px;
height: 200px;
background: #666;
}
/* 使用 */
.cardWrap{
.card();
.card;
/*.card 与 .card() 是等价的
}*/
映射
你还可以将混合（mixins）和规则集（rulesets）作为一组值的映射（map）使用
/* less */
#colors() {
primary: blue;
secondary: green;
}
.button {
color: #colors[primary];
border: 1px solid #colors[secondary];
}
/* 结果 */
.button {
color: blue;
border: 1px solid green;
}
条件判断
#card{
/* and 运算符 ，相当于 与运算 &&，必须条件全部符合才会执行 */
.border(@width,@color,@style) when(@width > 100px) and (@color = #999) {
border: @width @color @style;
};
/* not 运算符，相当于 非运算 !，条件为 不符合才会执行 */
.bg(@color,@width) when not (@width > 100px){
background: @color;
width: @width;
};
// , 逗号分隔符：相当于 或运算 ||，只要有一个符合条件就会执行
.font(@size:20px) when (@size>50px) , (@size<100px){
font-size: @size;
}
}
/*数量不定的参数 犹如 ES6 的扩展运算符*/
.boxShadow(...){
box-shadow: @arguments;
}
.main{
// width: 500px;
height: 500px;
#card > .border(200px,#999,solid);
#card > .bg(red,100px);
#card > .font(50px)
}
循环方法
/* less */
.generate-columns(4);
.generate-columns(@n,@i:1) when(@i < @n){
.columns-@{i}{
width:(@i * 100% / @n ) ;
};
.generate-columns(@n,(@i+1));
}
/* 生成后的 CSS */
.column-1 {
width: 25%;
}
.column-2 {
width: 50%;
}
.column-3 {
width: 75%;
}
.column-4 {
width: 100%;
}
继承
extend 关键字的使用
/* Less */
.animation{
transition: all .3s ease-out;
.hide{
transform:scale(0);
}
}
#main{
&:extend(.animation);
}
#con{
&:extend(.animation .hide);
}
/* 生成后的 CSS */
.animation,#main{
transition: all .3s ease-out;
}
.animation .hide , #con{
transform:scale(0);
}