网站管理工具,微信网站怎么收款,千锋教育课程,天津网站设计公司文章目录 一、定义#xff1a;【1】Less【2】Sass 二、相同之处:三、区别:【1】实现方式#xff1a;【2】实现方式#xff1a;【3】混合(Mixins)#xff1a;【4】解析方式#xff1a;【5】变量的作用域#xff1a;【6】比起Less 一、定义#xff1a;
【1】Less Less 是… 文章目录 一、定义【1】Less【2】Sass 二、相同之处:三、区别:【1】实现方式【2】实现方式【3】混合(Mixins)【4】解析方式【5】变量的作用域【6】比起Less 一、定义
【1】Less Less 是一门 CSS 预处理语言它扩充了 CSS 语言增加了诸如变量、混合(mixin)、函数等功能让 CSS 更易维护、方便制作主题、扩充。Less 可以运行在 Node 或浏览器端。 【2】Sass Sass 是一款强化 CSS 的辅助工具它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库(如 Compass)有助于更好地组织管理样式文件以及更高效地开发项目。 二、相同之处:
###### 【1】变量
可以单独定义一系列通用的样式在需要的时候进行调用。
###### 【2】混合(Mixins)
class中的class(讲一个class引入到另一个class实现class与class之间的继承)还可以带参数的混合就像函数一样。
###### 【3】嵌套
class中嵌套class从而减少代码的重复。
###### 【4】运算
提供了加减乘除四则运算可以做属性值可颜色的运算。三、区别:
【1】实现方式 Less是基于JavaScript是在客户端进行处理的 Sass是基于Ruby是在服务器端进行处理的。 【2】实现方式 Less定义变量时使用前缀 Sass定义变量时使用前缀$ //Less定义变量
color: #4D926F;
header {color: color;
}//Sass定义变量:
$blue : #1875e7;
div {color : $blue;
}【3】混合(Mixins) Less中使用混合时只需在classB中根据classA的命名来是用 Sass中首先在定义混合时需要使用mixin命令其次在调用时需要使用include命令来引入之前定义的混合。 //Less中的混合
.rounded-corners(radius: 5px){ -webkit-border-radius: radius; -moz-border-radius: radius; -ms-border-radius: radius; -o-border-radius: radius; border-radius: radius;
}header {.rounded-corners;
}
footer {.rounded-corners(10px);
}//Sass中的混合
mixin left($value: 10px) { float: left; margin-right: $value;
}div {include left(20px);
}【4】解析方式 Less可以向上/向下解析 Sass只能向上解析。 【5】变量的作用域 Less中的变量有全局和局部之分 Sass可以变量可以理解为都是全局的但可以通过在变量后面跟!default在引入Sass文件之前改变变量的属性值来解决这一问题。 //Less
width:100px;
h1{ width:200px; width:width;
}
h2{ width:width;
}
编译后 h1 { width: 200px; } h2 { width: 100px; }//Sass
$borderColor:red !default;
.border{ border:1px solid $borderColor;
}
编译后 .border{ border: 1px solid red; } 【6】比起Less Sass中增加了条件语句(if、if…else)和循环语句(for循环、while循环和each循环)还有自定义函数 ### 【1】if条件句
p {if 1 1 2 { border: 1px solid; }if 5 3 { border: 2px dotted; }
}### 【2】if...else条件句
if lightness($color) 30% {background-color: #000;
} else {background-color: #fff;
}### 【3】for循环
for $i from 1 to 10 {.border-#{$i} {border: #{$i}px solid blue;}
}### 【4】while循环
$i: 6;
while $i 0 {.item-#{$i} { width: 2em * $i; }$i: $i - 2;
}### 【5】each循环类似于for循环
each $member in a, b, c, d {.#{$member} {background-image: url(/image/#{$member}.jpg);}
}### 【6】自定义函数
function double($n) {return $n * 2;
}#sidebar {width: double(5px);
}
