sass和less
都是css预处理器，目的旨在提高和增强css的能力
sass
概述：sass基于Ruby，原来Ruby环境，使用前必须安装Ruby环境，可以理解为scsss的严格模式，全兼容css。是一款最早且最成熟的css预处理器（性能超强）
他可以使用变量、常量、嵌套、混入、函数等功能
他有两套语法规则：1.用缩进作为分隔符来区分代码 2.用{} 作为分隔符（此规则就是scss，在scss3之后都支持这套语法）
sass的导入
- 导入其他sass/scss文件，可忽略文件后缀，编译方式为被倒入文件共同编译成一个csss文件。
@import 'main'
- 导入css文件，不可忽略文件后缀，编译后作为单独文件存在，在被导入文件中依旧是以
@import 'main.css'方式存在
@import 'main.css'
在一下吧情况下，@import仅作为普通css语句，不会导入到任何sass文件共同编译成一个css文件
- 文件拓展名为
.css
- 文件名以
http://开头
- 文件名是
url()
- @import 包含media queries
注释
两种方式：
- 标准注释
/* */
//单行注释 （这种注释方式的内容不会被编译出来）
样式嵌套
.class1{
font-size:20px;
.class2{
color:yellow;
}
}
结构严谨，更容易排查样式问题
变量以$开头，类似js中的变量
$color:yellow;
.class{
background-color:$color;
}
Mixins（混合@mixin）
可重用性高，可以注入任何东西（在css和scss中有效的任意内容，包括函数、变量等）
注意：
- 可以互相调用，但不能拿自己调自己，形成递归
- 通过include引用
- ab-c 与 ab_c 被认为等同的模块名称
作用： 自定义想复用的样式模块
@mixin button{
font-size:16px;
color:blue;
}
.model_btn{
@include button;
background-color:yellow;
}
.model_btn{
font-size:16px;
color:blue;
background-color:yellow;
}
@extend
继承一个选择器
类似与@mixin，但@mixin更加灵活
.a{
color:yellow;
}
.b{
@extend .a;
font-size:12px;
}
.b{
color:yellow;
font-size:12px;
}
function
自定义函数
注意： 每个函数都需要有返回值
@function add($r){
@return $r*2
}
.a{
font-zise:#{add(8)}px;
}
.a{
font-size:16px;
}
&父选择器
.div{
&:hover{
cousor:pointer;
}
}
.div{}
.div:hover{
cousor:pointer;
}
组合连接 #{}
变量连接字符串
$name:foo;
$attr:border;
p.#{ $name }{
#{ $attr }-color:blue;
}
p.foo{
border-color:blue;
}
计算
p{
margin:20px+30px;
width:100px-50px;
height:50px*2;
font-size:20px/2;
}
p{
margin:50px;
width:50px;
height:100px;
font-size:10px;
}
循环
三种方式：@for @while @each
@for $i from 1 to 10{
.a5_img#{$i}{
background-image:url('images/img#{$i}.png');
}
}
@while $j > 0{
.a5_img#{$j}{
background-image:url('images/img#{$j}.png');
}
$j:$j - 1;
}
@each $item in 1,2,3,4,5{
.a5_img#{$item}{
background-image:url('images/img#{$item}.png');
}
}
if语句
@mixin bgcolor($b){
@if($b == 5){
background-color:yellow;
}
@else if($b == 4){
background-color:blue;
}
@else{
background-color:#fff;
}
}
less
不需要Ruby环境，安装即可用
定义变量
以@开头
.class1{
color:@color;
width:100px;
height:100px;
}
样式嵌套
.class1{
width:100px;
height:100px;
.class2{
width:50px;
height:50px;
}
}
样式的运算
@width:100px;
.class1{
width:@width/2; //除法
height：50px;
color:#222 + #333; //#555,单纯加法
background：darken(#ff6b4d,10%); //背景色加深10%
line-height:25px*2; //50px 乘法
}
颜色计算：加法与减法相同，但数值如果超出000～fff，则计算结果举例最近的000或者fff
传参
.class1(@width:100px){
width:@width;
height:100px;
}
函数
- 如Math数学函数：round(2.5),cell(7,4),floor(2.6),percentage(0.5),min(…),max(…)等
- color颜色函数
darken(@color,10%),aturate(@color,10%),lighten(@color,10%)等
- 混合（misc）
image-size(‘file.jpg’) //返回图像的尺寸
image-width('file.jpg) //返回图像的宽度
convert(9s,‘ms’) //单位转换
- 字符串（string）
replace(‘Hi Tom?’,‘Tom’,‘Jack’)//Hi Jack
replace(‘Hi Tom?’,’(Tom).$’,‘new $1.’) // Hi new Tom
- 列表（List）
@list：‘A’,‘B’,‘C’,‘D’
length(@list) //4
extract(@list,3) // C
总结:
- sass需要Ruby环境，是在服务端处理编译的
- less不需要环境配置，在前端提前将代码进行编译转成css使用
- 变量符号不同，sass是
$,less是@
- sass支持太哦件语句，可以使用IF{},ELSE{},FOR{},而less不行
- sass提供4种输出设置
NESTED（默认） 嵌套锁进的csss代码
COMPACT 展开的多行css代码
COMPRESSED 简介格式的css代码
EXPANDED 压缩后的css代码
暂时总结到这里
