CSS预处理器(less 和 sass)

CSS预处理器

1.基于CSS的另一种语言

2.通过工具编译成CSS

3.添加了很多CSS不具备的特性

4.能提升CSS文件的组织

提供功能:1.嵌套 反映层级和约束 2.变量和计算,减少重复戴拿 3.Extend 和 Mixin 代码片段

4.循环 适用于复杂有规律的样式 5.import CSS 文件模块化

知识点:

1.less(嵌套)

body{
padding:0;
margin:0;
} .wrapper{
background:white; .nav{
font-size: 12px;
}
.content{
font-size: 14px;
&:hover{
background:red;
}
}
}

2.sass 嵌套

body {
padding: 0;
margin: 0;
} .wrapper {
background: white;
} .wrapper .nav {
font-size: 12px;
} .wrapper .content {
font-size: 14px;
} .wrapper .content:hover {
background: red;
}

3.less 变量

@fontSize: 12px;
@bgColor: red; body{
padding:0;
margin:0;
} .wrapper{
background:lighten(@bgColor, 40%); .nav{
font-size: @fontSize;
}
.content{
font-size: @fontSize + 2px;
&:hover{
background:@bgColor;
}
}
}

 需要改动变量时,只需改动变量的值然后编译成 css 文件即可,一次定义,多次使用,方便维护

4.sass 变量

$fontSize: 12px;
$bgColor: red; body{
padding:0;
margin:0;
} .wrapper{
background:lighten($bgColor, 40%); .nav{
font-size: $fontSize;
}
.content{
font-size: $fontSize + 2px;
&:hover{
background:red;
}
}
}

 sass 和 css 不兼容,尽量避免混淆,@在css 中是有意义的,故使用 $.

5.less mixin

有一段代码想公共使用(复用)的情况下:

@fontSize: 12px;
@bgColor: red; .box{
color:green;
} .box1{
.box();
line-height: 2em;
}
.box2{
.box();
line-height: 3em;
} .block(@fontSize){
font-size: @fontSize;
border: 1px solid #ccc;
border-radius: 4px;
} body{
padding:0;
margin:0;
} .wrapper{
background:lighten(@bgColor, 40%); .nav{
.block(@fontSize);
}
.content{
.block(@fontSize + 2px);
&:hover{
background:red;
}
}
}

编译成css

.box {
color: green;
}
.box1 {
color: green;
line-height: 2em;
}
.box2 {
color: green;
line-height: 3em;
}
body {
padding: 0;
margin: 0;
}
.wrapper {
background: #ffcccc;
}
.wrapper .nav {
font-size: 12px;
border: 1px solid #ccc;
border-radius: 4px;
}
.wrapper .content {
font-size: 14px;
border: 1px solid #ccc;
border-radius: 4px;
}
.wrapper .content:hover {
background: red;
}

6. sass mixin

$fontSize: 12px;
$bgColor: red; @mixin block($fontSize){
font-size: $fontSize;
border: 1px solid #ccc;
border-radius: 4px;
} body{
padding:0;
margin:0;
} .wrapper{
background:lighten($bgColor, 40%); .nav{
@include block($fontSize);
}
.content{
@include block($fontSize + 2px);
&:hover{
background:red;
}
}
}

与 less 不同点:1. less 需要 @mixin 2.参数名称不一样 3.不需要class,直接指定其名字

编译成 css

body {
padding: 0;
margin: 0;
} .wrapper {
background: #ffcccc;
} .wrapper .nav {
font-size: 12px;
border: 1px solid #ccc;
border-radius: 4px;
} .wrapper .content {
font-size: 14px;
border: 1px solid #ccc;
border-radius: 4px;
} .wrapper .content:hover {
background: red;
}

 

7.less extend

解决重复代码问题,减少 css 体积

@fontSize: 12px;
@bgColor: red; .block{
font-size: @fontSize;
border: 1px solid #ccc;
border-radius: 4px;
} body{
padding:0;
margin:0;
} .wrapper{
background:lighten(@bgColor, 40%); .nav:extend(.block){
color: #333;
}
.content{
&:extend(.block);
&:hover{
background:red;
}
}
}

mixin 是把代码直接复制过来,extend 是把选择器提取出来,把公共样式写到一起  

编译成 css

.block,
.wrapper .nav,
.wrapper .content {
font-size: 12px;
border: 1px solid #ccc;
border-radius: 4px;
}
body {
padding: 0;
margin: 0;
}
.wrapper {
background: #ffcccc;
}
.wrapper .nav {
color: #333;
}
.wrapper .content:hover {
background: red;
}

8. sass extend

$fontSize: 12px;
$bgColor: red; .block{
font-size: $fontSize;
border: 1px solid #ccc;
border-radius: 4px;
} body{
padding:0;
margin:0;
} .wrapper{
background:lighten($bgColor, 40%); .nav{
@extend .block;
color: #333;
}
.content{
@extend .block;
&:hover{
background:red;
}
}
}

 编译成 css

.block, .wrapper .nav, .wrapper .content {
font-size: 12px;
border: 1px solid #ccc;
border-radius: 4px;
} body {
padding: 0;
margin: 0;
} .wrapper {
background: #ffcccc;
} .wrapper .nav {
color: #333;
} .wrapper .content:hover {
background: red;
}

 sass 中 div 没有换行,其余再无区别,在样式表中就可以完全完成样式变更的操作,更加集中地维护代码

9.less loop (循环)

高度有规律的情况(网格) 采用递归,出口就是 n <= 0 时,跳出循环

.gen-col(@n) when (@n > 0){
.gen-col(@n - 1);
.col-@{n}{
width: 1000px/12*@n;
}
} .gen-col(12);

编译成 css

.col-12 {
width: 1000px;
}
.col-11 {
width: 916.66666667px;
}
.col-10 {
width: 833.33333333px;
}
.col-9 {
width: 750px;
}
.col-8 {
width: 666.66666667px;
}
.col-7 {
width: 583.33333333px;
}
.col-6 {
width: 500px;
}
.col-5 {
width: 416.66666667px;
}
.col-4 {
width: 333.33333333px;
}
.col-3 {
width: 250px;
}
.col-2 {
width: 166.66666667px;
}
.col-1 {
width: 83.33333333px;
}

10. sass loop

@mixin gen-col($n){
@if $n > 0 {
@include gen-col($n - 1);
.col-#{$n}{
width: 1000px/12*$n;
}
}
} @include gen-col(12);

 这是类比上面 less 的写法,但 sass 还有更简便的写法,因为 sass 支持 for,故

@for $i from 1 through 12 {
.col-#{$i} {
width: 1000px/12*$i;
}
}

  编译成 css

.col-1 {
width: 83.33333px;
} .col-2 {
width: 166.66667px;
} .col-3 {
width: 250px;
} .col-4 {
width: 333.33333px;
} .col-5 {
width: 416.66667px;
} .col-6 {
width: 500px;
} .col-7 {
width: 583.33333px;
} .col-8 {
width: 666.66667px;
} .col-9 {
width: 750px;
} .col-10 {
width: 833.33333px;
} .col-11 {
width: 916.66667px;
} .col-12 {
width: 1000px;
}

11. less import

解决 css 模块化 问题

6-import-variable

@themeColor: blue;
@fontSize: 14px;

6-import-module1

.module1{
.box{
font-size:@fontSize + 2px;
color:@themeColor;
}
.tips{
font-size:@fontSize;
color:lighten(@themeColor, 40%);
}
}

6-import-module2

.module2{
.box{
font-size:@fontSize + 4px;
color:@themeColor;
}
.tips{
font-size:@fontSize + 2px;
color:lighten(@themeColor, 20%);
}
}

  less import(可以跨文件使用)

@import "./6-import-variable";
@import "./6-import-module1";
@import "./6-import-module2";

  编译成 css

.module1 .box {
font-size: 16px;
color: blue;
}
.module1 .tips {
font-size: 14px;
color: #ccccff;
}
.module2 .box {
font-size: 18px;
color: blue;
}
.module2 .tips {
font-size: 16px;
color: #6666ff;
}

 12.sass import

  6-import-variable

$themeColor: blue;
$fontSize: 14px;

 6-import-module1

.module1{
.box{
font-size:$fontSize + 2px;
color:$themeColor;
}
.tips{
font-size:$fontSize;
color:lighten($themeColor, 40%);
}
}

 6-import-module2

.module2{
.box{
font-size:$fontSize + 4px;
color:$themeColor;
}
.tips{
font-size:$fontSize + 2px;
color:lighten($themeColor, 20%);
}
}

 sass import(可以跨文件使用)

@import "./6-import-variable";
@import "./6-import-module1";
@import "./6-import-module2";

 编译成 css

.module1 .box {
font-size: 16px;
color: blue;
}
.module1 .tips {
font-size: 14px;
color: #ccccff;
}
.module2 .box {
font-size: 18px;
color: blue;
}
.module2 .tips {
font-size: 16px;
color: #6666ff;
}

   

上一篇:Mysql 基础用法


下一篇:ViewPager实现页卡的最新方法--简洁的TabLayout(谷歌支持包)