Less与Sass(CSS预处理语言)

简介 它扩展了 CSS 语言,增加了变量、Mixin、函数等特性,使 CSS 更易维护和扩展。

SASS介绍:

Sass 是一款强化 CSS 的辅助工具,它在 CSS 语法的基础上增加了变量 (variables)、嵌套 、混合 (mixins)、导入 (inline imports) 等高级功能 并且完全兼容CSS3,这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库(如 Compass)有助于更好地组织管理样式文件,以及更高效地开发项目。

SASS安装

sass基于Ruby语言开发而成,因此安装sass前需要安装Ruby

sass有两种语法 scss和sass

scss/sass编译

单文件编译

1
2
//单文件转换命令
sass input.sass output.css

这是对一个单文件进行编译,如果想对整个项目所有 Sass 文件编译成 CSS 文件,可以这样操作:

1
sass sass/:css/

上面的命令表示将项目中“sass”文件夹中所有“.scss”(“.sass”)文件编译成“.css”文件,并且将这些 CSS 文件都放在项目中“css”文件夹中。

单文件监听

编译格式(只能用scss) style后是生成之后css的排版样式

1
sass --watch input.scss:output.css --style compact(nested,expanded,compact)

scss语法

1.自定义变量

1
2
3
4
$color:pink;
.test1{
background-color:$color;
}

编译出来后

1
2
3
.test1{
background-color:pink;
}

2.子元素书写

1
2
3
4
5
.text3{
.text33{
border:1px solid;
}
}

3.样式的加减乘除

1
2
3
4
5
6
7
$paramer:3; 
.text4{
height:(1px+3px);
width: (96px/6);
right: $paramer*4px;
color: #010203 * 4
}

4.嵌套规则

Sass 允许将一套 CSS 样式嵌套进另一套样式中,内层的样式将它外层的选择器作为父选择器,例如:

1
2
3
4
5
6
7
8
9
#main p {
color: #00ff00;
width: 97%;

.redbox {
background-color: #ff0000;
color: #000000;
}
}

5.@if

@if 的表达式返回值不是 false 或者 null 时,条件成立,输出 {} 内的代码:

1
2
3
4
5
p {
@if 1 + 1 == 2 { border: 1px solid; }
@if 5 < 3 { border: 2px solid; }
@if 3 - 1 == 5 { border: 3px double; }
}

@if 声明后面可以跟多个 @else if 声明,或者一个 @else 声明。如果 @if 声明失败,Sass 将逐条执行 @else if 声明 如果全部失败,最后执行 @else 声明

1
2
3
4
5
6
7
8
9
10
11
12
$type: 1;
p {
@if $type == 2 {
color: blue;
} @else if $type == 1 {
color: red;
} @else if $type == 3 {
color: green;
} @else {
color: black;
}
}

6.@for

这个指令包含两种格式:@for $var from <start> through <end>,或者 @for $var from <start> to <end>,区别在于 throughto 的含义:当使用 through 时,条件范围包含 的值,而使用 to 时条件范围只包含 的值不包含 的值。另外,$var 可以是任何变量,比如 $i<start><end> 必须是整数值。

from 1 through 3 输出 1 2 3

from 1 to 3 输出 1 2

1
2
3
@for $i from 1 through 3 { 
.item-#{$i} { width: 2em * $i; }
}

7.@mixins混合 使用 @include 指令引用混合样式,格式是在其后添加混合名称,以及需要的参数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
声明
@mixin large-text {
font: {
family: Arial;
size: 20px;
weight: bold;
}
color: #ff0000;
}

.page-title {
@include large-text;
padding: 4px;
margin-top: 10px;
}

SASS语法

Sass的缩进语法(也被简单地称为“Sass”)旨在提供一种更简洁的,对于某些人来说,更有吸引力的替代基于CSS的SCSS语法。它与CSS不兼容,而不是使用{}为了分隔样式块,它使用缩进,而不是使用分号分隔语句,而是使用换行符。当说同样的话时,这通常会导致大量的文本减少。

Sass中的每个语句,例如属性声明和选择器,都必须放在自己的行中。此外,所有在{}在语句之后,必须在新行上缩进比该语句更深的一层。

编译后产生的.sass-cache 文件

缓存相关的东西,预处理器编译一次就会生成,可以删除,但是下次再编译的时候还会产生的,所以就放那好了,产品要发布的时候只要css就可以了。

LESS介绍

CSS(层叠样式表)是一项出色的技术作为一门标记性语言,CSS 的先天性优点是语法相对简单,对使用者的要求较低,但它的致命弱点是需要书写大量看似没有逻辑的代码不方便维护及扩展,不利于复用

造成这一现象的很大原因在于 CSS 是一门非程序式语言,没有变量、函数、SCOPE(作用域)等概念。

Less 的出现,为 Web 开发者带来了福音,它是一门 CSS 预处理语言,引入了变量、运算、函数、继承等功能,为 CSS 语言赋予了动态语言的特性。

Less大大简化了 CSS 的编写,并且降低了 CSS 的维护成本。就像它的名称所说的那样,Less 可以让我们用更少的代码做更多的事情

Less用法:

浏览器端用法

  1. 引入 .less文件

    1
    <link rel="stylesheet/less" type="text/css" href="styles.less">
  2. 引入Less.js文件

    1
    <script src="Less.js" type="text/javascript"></script>  引入Less.js文件
  3. 安装Less编译器c

    1
    2
    3
    npm(网站) install(安装) -g(global 全局) less(编译器)

    lessc -v 如果出现版本号 就算less安装成功了

Less编译:

第一种方法(命令行): 在less文件夹下打开命令行窗口 输入命令:lessc path/xxx.less path/xxx.css

第三种方法(vscode): 在vscode中安装Easy Less 然后在文件中创建less文件即可

1.下载插件(只要安装插件 不需要安装node 和任何东西)

2.新建一个less文件

3.写一个less代码

4.保存就可以了

Less语法

变量

1
2
3
4
5
6
7
@width: 10px;
@height: @width + 10px;

#header {
width: @width;
height: @height;
}

编译为:

1
2
3
4
#header {
width: 10px;
height: 20px;
}

嵌套

&表示当前父选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
.clearfix {
display: block;
zoom: 1;

&:after {
content: " ";
display: block;
font-size: 0;
height: 0;
clear: both;
visibility: hidden;
}
}

在LESS中,有很多方式都可以称作混合 比如继承已有的样式

1
2
3
4
5
6
7
8
9
10
11
12
13
.width {
width:1232px;
}
#height {
height:2980px;
}
.long {
.width;
.meng {
#height;
.width;
}
}

less与scss的区别

  1. 声明变量 less采用@符号 sass使用$符号
  2. Mixins的使用 LESS 使用句点来定义一个 Mixin;SCSS 使用 @mixin 指令来定义一个 Mixin
  3. scss能够使用if语句和for循环 less不行
  4. Less是基于JavaScript,是在客户端进行处理的;Sass是基于Ruby,是在服务器端进行处理的。