Vue进阶(幺柒陆):CSS预编译语言Sass、Scss、Less和Stylus

Alex799 等级 724 0 0

什么是CSS预处理器

CSS预处理器定义了一种新的语言,它的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件。开发者只需要使用这种语言进行编码工作,减少枯燥无味的CSS代码编写过程的同时,它能让你的CSS具备更加简洁、适应性更强、可读性更加、层级关系更加明显、更易于代码的维护等诸多好处。

CSS 预处理器用一种专门的编程语言,进行 Web 页面样式设计,然后再编译成正常的 CSS 文件,以供项目使用。CSS 预处理器CSS 增加一些编程的特性,无需考虑浏览器的兼容性问题。

CSS预处理器的种类

目前最主流的三个预处理器分别为:SassLessStylus

  • SASS:2007年诞生,最早也是最成熟的CSS预处理器,拥有ruby社区的支持和compass这一最强大的css框架Sass默认使用 .sass扩展名。

现在的Sass已经有了两套语法规则:一个依旧是用缩进作为分隔符来区分代码块的;另一套规则(受LESS影响)和CSS一样采用了大括号({})作为分隔符。后一种语法规则又名SCSSSCSS默认使用 .scss扩展名),在Sass3之后的版本都支持这种语法规则。

  • LESS:2009年出现,受SASS的影响较大,但又使用CSS的语法,让大部分开发者和设计师更容易上手,在ruby社区之外支持者远超过SASS,其缺点是比起SASS来,可编程功能不够,不过优点是简单和兼容CSS,反过来也影响了SASS演变到了SCSS的时代,著名的Twitter Bootstrap就是采用LESS做底层语言的,Less默认使用.Less扩展名。

根据维基百科上的介绍,其实LESSAlexis SellierSass的影响创建的一个开源项目。当时SASS采用了缩进作为分隔符来区分代码块,而不是CSS中广为使用的大括号({})。为了让CSS现有的用户使用起来更加方便,Alexis开发了LESS并提供了类似CSS的书写功能。

  • Stylus:2010年产生,来自Node.js社区,主要用来给Node项目进行CSS预处理支持,在此社区之内有一定支持者,在广泛的意义上人气还完全不如SASSLESSStylus默认使用.styl扩展名。

Stylus被称为是一种革命性的新语言,提供一个高效、动态、和使用表达方式来生成CSS,以供浏览器使用。Stylus同时支持缩进和CSS常规样式书写规则。

预处理器语法一般包括:

  • 变量
  • 嵌套
  • 混合Mixins
  • 运算
  • 导入 (Import)
  • 函数

语法

CSS预编译语言的语法都非常简单,如果你的编辑器给力的话,file watching会自动找出语法错误。

语法上Sass3ScssLess非常相似,旧版SassStylus特殊一些,旧版Sass我们就了解一下,Stylus的语法更加灵活一些,功能也更强大一些。

例如
1、Sass

/*旧版sass语法*/
h1
  color: #000
  font-size: 24px 

2、SCSS

/*scss语法*/
h1{
  color: #000;
  font-size: 24px;
} 

3、LESS

/*less语法*/
h1{
  color: #000;
  font-size: 24px;
} 

4、Stylus

/*Stylus语法的多样式*/
h1{
  color: #000;
  font-size: 24px;
}
h1
  color: #000
  font-size: 24px
h1
  color #fff
  font-size 24px 

变量

/*  1、Scss的变量必须是$开始*/
$mainColor: #000;
h1{
  color: $mainColor;
}

/* 2、Less 的变量名使用 @ 符号开始*/
@mainColor: #000;
h1{
  color: @mainColor;
}

/* 4、Stylus 的变量名不要用 @ 开头, =赋值 */
mainColor = #000;
h1{
  color: mainColor;
} 

嵌套

如果你需要在CSS中相同的parent引用多个元素,你需要一遍一遍的去写parent。用CSS预处理器,就可以少些很多单词,而且父节点关系一目了然。

下面将不再介绍老版sass的写法,直接介绍scss写法。

同样生成

nav{
  color: #000;
  font-size: 16px;
}
nav a{
  color: #0000cc;
  font-size: 18px; 
}
nav a.first{
 color:red
} 

/Scss、less、Stylus的嵌套,伪类嵌套都是使用&/ nav { color: #000; font-size: 16px; a { color: #0000cc; font-size: 18px; &.first { color: red; } } }

/Stylus的嵌套还可以这样写/ nav color #000 font-size 16px a color #0000cc font-size 18px &.first color red


[](https://shq5785.blog.csdn.net/article/details/114214033)Mixin混合
------------------------------------------------------------------

`Mixins`是`CSS预处理器`中语言中最强大的特性,简单点来说,`Mixins`可以将一部分样式抽出,作为单独定义的模块,被很多选择器重复使用。

平时你在写样式时肯定有碰到过,某段`CSS`样式经常要用到多个元素中,这样你就需要重复的写多次。在`CSS预处理器`语言中,你可以为这些公用的`CSS`样式定义一个`Mixin`,然后在你`CSS`需要使用这些样式的地方直接调用你定义好的`Mixin`。这是一个非常有用的特性,`Mixins`被当作一个公认的选择器,还可以在`Mixins`中定义变量或者默认参数。

`CSS预编译`工具允许我们将已有的 `class` 和 `id` 的样式应用到另一个不同的选择器上。 如:

/Scss、less混合语法/ .circle{ border-radius: 100%; background: #ccc; } .small-circle{ width: 50px; height: 50px; .circle } .big-circle{ width: 100px; height: 100px; .circle } /Stylus Mixin混合语法/ circle{ border-radius: 100%; background: #ccc; } .small-circle{ width: 50px; height: 50px; circle } .big-circle{ width: 100px; height: 100px; circle }


### [](https://shq5785.blog.csdn.net/article/details/114214033)1、混入可以传递参数

/* 这是scss样例

  1. 改成less,只需要变$为@
  2. 改成Stylus,只需要.circle变为circle */ .circle($radius){ border-radius: $radius; background: #ccc; } .small-circle{ width: 50px; height: 50px; .circle(5px) }

2、混入可带默认值

/* 这是scss样例
1. 改成less,只需要变$为@
2. 改成Stylus,只需要.circle变为circle,:改为=
 */
.circle($radius:5px){
  border-radius: $radius;
  background: #ccc;
}
.small-circle{
  width: 50px;
  height: 50px;
  .circle
}
/* 这是Stylus样例 */
circle($radius=5px){
  border-radius: $radius;
  background: #ccc;
}
.small-circle{
  width: 50px;
  height: 50px;
  circle
} 

运算

/* 这是Scss样例 */
$test:300px;
.test_01{
  width: $test  +  20px;//
  height: $test*2 ;
  color: #ccc - 10;
}

/* 这是Less样例 */
@test:300px;
.test_01{
  width: @test  +  20px;//
  height: @test*2 ;
  color: #ccc - 10;
}

/* 这是Stylus样例 */
test=300px
.test_01{
  width: test  +  20px;//
  height: test*2 ;
  color: #ccc - 10;
} 

作用域(Scope

CSS预处理器语言中的变量和其他程序语言一样,可以实现值的复用,同样它也存在生命周期,也就是Scope(变量范围,开发人员习惯称之为作用域),简单点讲就是局部变量还是全局变量的概念,查找变量的顺序是先在局部定义中找,如果找不到,则查找上级定义,直至全局。下面我们通过一个简单的例子来解释这三款CSS预处理器的作用域使用。

Sass的作用域

Sass中作用域在这三款预处理器是最差的,可以说在Sass中是不存在什么全局变量。具体来看下面的代码:

/*Sass样式*/
$color: black;
.scoped {
  $bg: blue;
  $color: white;
  color: $color;
  background-color:$bg;
}
.unscoped {
  color:$color;
} 

先看转译出来的CSS样式:

.scoped {
  color:white;/*是白色*/
  background-color:blue;
}
.unscoped {
  color:white;/*白色(无全局变量概念)*/
} 

示例明显的告诉我们,在Sass样式中定义变量,调用变量是没有全局变量一个概念存在,因此在Sass中定义了相同变量名时,在调用之时千万要多加小心,不然会给你的样式带来错误。

LESS的作用域

LESS中的作用域和其他程序语言中的作用域非常的相同,他首先会查找局部定义的变量,如果没有找到,会像冒泡一样,一级一级往下查找,直到根为止,同样上面的例子,我们来看看他在LESS下所起的变化。

/*LESS样式*/
@color: black;
.scoped {
  @bg: blue;
  @color: white;
  color: @color;
  background-color:@bg;
}
.unscoped {
  color:@color;
} 

转译出来的CSS样式:

.scoped {
  color:white;/*白色(调用了局部变量)*/
  background-color:blue;
}
.unscoped {
  color:black;/*黑色(调用了全局变量)*/
} 

Stylus的作用域

Stylus虽然起步比较晚,但其作用域的特性和LESS一样,可以支持全局变量和局变量。会向上冒泡查找,直到根为止。

函数

SassLessStylus都提供了丰富的内置函数,Stylus更允许自定义函数,使用的时候自行查询吧。

导入

几种CSS预编译语言的导入语法是相同的。与css3@import看起来写法也相同,但css3@import会引起异步加载。并不是我们期望的。

CSS预编译器 @import解决了这个问题,它能将多个样式文件合并为一个,本质上是方便前端管理代码,并不会异步加载。

@import 'reset.scss'  //scss中导入样式
@import "reset";      // less导入默认导入为less文件
@import "reset.css"  // Stylus导入默认导入为css文件 

循环语句

SassScss),Stylus支持循环语句

分支语句

SassScss),Stylus支持条件语句

拓展阅读

本文转自 https://shq5785.blog.csdn.net/article/details/114214033,如有侵权,请联系删除。

收藏
评论区

相关推荐

一张图教你快速玩转vue-cli3
前言 本文系统的梳理了vuecli3搭建项目的常见用法,目的在于让你快速掌握独立搭建vue项目的能力。你将会了解如下知识点: 如何安装项目插件 添加浏览器支持 如何配置scss/stylus共享全局变量 如何整合elementUI等第三方框架并实现按需引入 配置单/多页面 如何配置自定义环境变量 如何在vue.config.js定制自己的we
《css大法》之使用伪元素实现超实用的图标库(附源码
今天我们来复盘一下前端中css伪元素的知识以及如何用css伪元素来减轻javascript的压力,做出一些脑洞大开的图形。 预备知识 伪元素 伪元素是一个附
有关CSS预编译、管理工具和网络安全的相关面试题
我经常会听到一些想入行前端的人问,前端开发需要学习哪些技术?其实,除了核心的HTML、CSS、JavaScript技术外,像CSS预编译、前端框架,如Vue,React、Node、Angular;代码管理工具,如git,代码编辑器,sublime text,还有测试,网络安全等相关技术也是需要会一些。当然要求可能不会那么高,但至少要懂一些。所有今天准备了一些
Vue进阶(幺柒柒):Vue应用Sass、Scss、Less和Stylus
Vue项目中使用预处理器,可以有效减少css代码量, 推荐使用Sass、Scss、Less预处理器。可以在创建项目的时候选择预处理器 (Sass/Less/Stylus)。如果当时没有选择,内置的 webpack 仍然会被预配置为可以完成所有的处理,也可以手动安装相应的 webpack loader: Sassnpm
Vue进阶(幺柒陆):CSS预编译语言Sass、Scss、Less和Stylus
什么是CSS预处理器CSS预处理器定义了一种新的语言,它的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件。开发者只需要使用这种语言进行编码工作,减少枯燥无味的CSS代码
只听说过CSS in JS,怎么还有JS in CSS?
CSS in JS是一种解决css问题想法的集合,而不是一个指定的库。从CSS in JS的字面意思可以看出,它是将css样式写在JavaScript文件中,而不需要独立出.css、.less之类的文件。将css放在js中使我们更方便的使用js的变量、模块化、treeshaking。还解决了css中的一些问题,譬如:更方便解决基于状态的样式,更容易追溯依赖关
Vscode个性化设置:让一个小萌妹陪你敲代码
前言大家平时都用什么代码编辑器啊!我个人比较喜欢用vscode,因为有以下几点: 开源,免费; 自定义配置 集成git 智能提示强大 支持各种文件格式(html/jade/css/less/sass/xml) 调试功能强大 各种方便的快捷键 强大的插件扩展 对前端这么友好
「Vue — css」使用sass/scss并定义全局变量
1:安装sassnode languagecnpm install sassnode save dev 2:安装sassloader languagecnpm install sassloader save dev3:在vue.config.js中进行配置 languagemodule.exports css: loaderOptions: s
CSS变量(自定义属性)实践指南
> 本文翻译自:https://www.sitepoint.com/practical-guide-css-variables-custom-properties/ > > 转载请注明出处:[葡萄城官网](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fwww.grapecity.com.
Less 简介
入门[](https://www.oschina.net/action/GoToLink?url=http%3A%2F%2Fwww.css88.com%2Fdoc%2Fless%2F%23getting-started) =====================================================================
SASS和LESS等优缺点对比,使用方法总结 (笔记大全)
### sass优点: 用户多,更容易找到会用scss的开发,更容易找到scss的学习资源; 可编程能力比较强,支持函数,列表,对象,判断,循环等; 相比less有更多的功能; Bootstrap/Foundation等使用scss; 丰富的sass库:Compass/Bourbon; ### sass缺点: 在公司内部安装node-sass会失败,需
CSS预处理器SASS用法和koala工具的使用
    最近在学习前端的时候,发现了一个SASS(CSS预处理器),感觉在前端布局写css样式来说是相当强大,效率又高,在用到SASS的时候感觉很爽。     首先说一下传统的CSS,在程序员的眼里感觉是一个很麻烦的东西,没有变量,也没有运算,还没有条件语句,感觉写的相当费事。     在人们都感觉费事的同时,真有牛人把CSS加入了编程的元素,这就是(CS
Sass用法指南
学过CSS的人都知道,它不是一种编程语言。 你可以用它开发网页样式,但是没法用它编程。也就是说,CSS基本上是设计师的工具,不是程序员的工具。在程序员眼里,CSS是一件很麻烦的东西。它没有变量,也没有条件语句,只是一行行单纯的描述,写起来相当费事。 很自然地,有人就开始为CSS加入编程元素,这被叫做"CSS预处理器"(css preproces
Sass预编译
sass基于Ruby               ruby的模块管理器叫gem   正规的安装方式是gem install sass                调用命令     sass    sass文件    css文件 **webpack编译sass**         需要的模块 style-loader  css-loader  sas
stylus基础教程,stylus实例教程,stylus语法总结
stylus特点 富于表现力、具有健壮性、功能丰富、动态编码 不需要写CSS的冒号、分号、大括号 和LESS、SASS功能类似,会这些的入手很快 stylus特点 安装 使用 stylus语法 (一)选择器 (二)变量 (三)插值 (四)运算符 (五)内置函数 (六)尾参数… (七)@extend继承