Less,Sass预处理器教程
1.0 CSS预处理器的介绍
CSS预处理器
- 基于CSS的另一种语言
- 通过工具编译成CSS
- 添加了很多CSS不具备的特性
- 能提升CSS文件的组织方式
CSS预处理器到底提供了哪些功能?
- 嵌套 反映层级和约束
- 变量和计算,减少重复代码
- Extend和Mixin代码片段
- 循环 适用于复杂有规律的样式
- import CSS文件模块化
Nesting(嵌套)
less 嵌套
因为 Less 和 CSS 非常像,因此很容易学习。而且 Less 仅对 CSS 语言增加了少许方便的扩展,这就是 Less 如此易学的原因之一。
//可以自动生成css文件
F:\vscode面试\less学习>lessc 1-nest.less >1-nest.css
body{
padding:0;
margin:0;
}
.wrapper{
background:white;
.nav{
font-size: 12px;
}
.content{
font-size: 14px;
&:hover{
background:red;
}
}
}
=========================转换为css
body {
padding: 0;
margin: 0;
}
.wrapper {
background: white;
}
.wrapper .nav {
font-size: 12px;
}
.wrapper .container {
font-size: 14px;
}
.wrapper .container:hover {
background: red;
}
sass嵌套
两者的嵌套规则基本一样
--style
表示解析后的css
是什么排版格式;sass内置有四种编译格式:nested``expanded``compact``compressed
。--sourcemap
表示开启sourcemap
调试。开启sourcemap
调试后,会生成一个后缀名为.css.map
文件
变量(Variables)
二者的差别原因,在于理念不同,less的理念是接近css语法,css中也会使用@符号
sass的理念在于,既然和css不是同一种语言,就尽量和css产生混淆
less变量
无需多说,看代码一目了然:
@width: 10px;
@height: @width + 10px;
#header {
width: @width;
height: @height;
}
编译为:
#header {
width: 10px;
height: 20px;
}
sass变量
变量 $
(Variables: $
)
SassScript 最普遍的用法就是变量,变量以美元符号开头,赋值方法与 CSS 属性的写法一样:
$width: 5em;
直接使用即调用变量:
#main {
width: $width;
}
变量支持块级作用域,嵌套规则内定义的变量只能在嵌套规则内使用(局部变量),不在嵌套规则内定义的变量则可在任何地方使用(全局变量)。将局部变量转换为全局变量可以添加 !global
声明:
#main {
$width: 5em !global;
width: $width;
}
#sidebar {
width: $width;
}
编译为
#main {
width: 5em;
}
#sidebar {
width: 5em;
}
混合(Mixins)
当我们需要一段代码进行复用的时候,可以使用less中的混合
Mixins类似于编程语言中的函数。Mixins是一组css属性,可以将一个类的属性用于另一个类,并且包含类名作为其属性。在less中,可以使用类选择器或者id选择器以与css样式相同的方式声明mixin.mixin可以存储多个值,并且可以在必要的时候在代码中重复使用
less混合
混合(Mixin)是一种将一组属性从一个规则集包含(或混入)到另一个规则集的方法。假设我们定义了一个类(class)如下:
.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
如果我们希望在其它规则集中使用这些属性呢?没问题,我们只需像下面这样输入所需属性的类(class)名称即可,如下所示:
#menu a {
color: #111;
.bordered();
}
.post a {
color: red;
.bordered();
}
.bordered
类所包含的属性就将同时出现在 #menu a
和 .post a
中了。(注意,你也可以使用 #ids
作为 mixin 使用。)
sass混合
概念几乎和less一样,但是使用方法和less完全不同,定义sass混合指令需要用@mixin
定义混合指令 @mixin
(Defining a Mixin: @mixin
)
混合指令的用法是在 @mixin
后添加名称与样式,比如名为 large-text
的混合通过下面的代码定义:
@mixin large-text {
font: {
family: Arial;
size: 20px;
weight: bold;
}
color: #ff0000;
}
混合也需要包含选择器和属性,甚至可以用 &
引用父选择器:
@mixin clearfix {
display: inline-block;
&:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
* html & { height: 1px }
}
extend
Extend是一个Less伪类,通过:extend在一个选择器中扩展其他选择器样式,从而与匹配其引用的选择器合并。
less extend
mixins是直接把代码复制过来,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;
}
}
}
.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 extend
@extend
在设计网页的时候常常遇到这种情况:一个元素使用的样式与另一个元素完全相同,但又添加了额外的样式。通常会在 HTML 中给元素定义两个 class,一个通用样式,一个特殊样式。假设现在要设计一个普通错误样式与一个严重错误样式,
@extend
的作用是将重复使用的样式 (.error
) 延伸 (extend) 给需要包含这个样式的特殊样式(.seriousError
),刚刚的例子:
loop
less loop
.gen-col(@n) when (@n > 0){
.gen-col(@n - 1);
// 生成一个class
.col-@{n}{
width: 1000px/12*@n;
}
}
.gen-col(12);
sass loop
@for
指令可以在限制的范围内重复输出格式,每次按要求(变量的值)对输出结果做出变动。这个指令包含两种格式:@for $var from <start> through <end>
,或者@for $var from <start> to <end>
,区别在于through
与to
的含义:当使用through
时,条件范围包含<start>
与<end>
的值,而使用to
时条件范围只包含<start>
的值不包含<end>
的值。另外,$var
可以是任何变量,比如$i
;<start>
和<end>
必须是整数值。@for $i from 1 through 3 { .item-#{$i} { width: 2em * $i; } }
编译为
.item-1 { width: 2em; } .item-2 { width: 4em; } .item-3 { width: 6em; }
@mixin gen-col($n){
@if $n > 0 {
@include gen-col($n - 1);
.col-#{$n} {
width: 1000px/12*$n;
}
}
}
@include gen-col(12);
// sass是支持for循环的,
@for $i from 1 through 12{
.col-#{$i} {
width: 1000px/12*$i;
}
}
import模块化
预处理器的变量是可以跨文件使用的
less 模块化
导入(Importing)
“导入”的工作方式和你预期的一样。你可以导入一个 .less
文件,此文件中的所有变量就可以全部使用了。如果导入的文件是 .less
扩展名,则可以将扩展名省略掉:
@import "library"; // library.less
@import "typo.css";
sass模块化
CSS预处理器总结
- 嵌套 反映层级和约束
- 变量和计算 减少重复代码
- Extend和Mixin代码片段
- 循环 适用于复杂有规律的样式
- import CSS文件模块化
CSS预处理器框架
css预处理器是我们可以按需使用别人的代码
- SASS - Compass
- Less - Lessshat / EST
- 提供现成的mixin
- 类似JS类库,封装常用功能
est
est 是一个基于 Less 的样式工具库,帮助您更轻松地书写 Less 代码。
est 提供了一系列方便快捷的 mixin,只在调用时才输出代码。est 不希望提供直接给 HTML 调用的类名,用「样式类」污染 HTML 代码的语义。当然您也可以根据自己的项目需求基于 est 搭建样式类库,提供类名接口来进行快速开发。
在est官网直接导入了est文件,使用的时候,遇到了一些问题
F:\vscode面试\less学习>lessc 7-est.less >7-est.css
SyntaxError: Inline JavaScript is not enabled. Is it set in your options? in F:\vscode面试\less学习\est\variables.less on line 4, column 18:
3 @support-ie-version: 7;
4 @support-old-ie: ~`@{support-ie-version} < 8`; // [deprecated] use `@support-ie-version` instead
5 @use-autoprefixer: true;
我是直接将est/src文件夹下的less文件全部放到了项目里面
CSS面试真题
常见的CSS预处理器
- Less(Node.js)
- Sass(Ruby 有Node版本)
预处理器的作用
- 帮助更好地组织css代码
- 提高代码复用率
- 提升可维护性
预处理器的能力
- 嵌套 反映层级和约束
- 变量和计算 减少重复代码
- Extend和Mixins 代码片段
- 循环 适用于复杂有规律的样式
- import CSS模块化
预处理器的优缺点
- 优点: 提高代码复用率和可维护性
- 缺点: 需要引入编译过程 有学习成本