Css、less和Sass(SCSS)搞不清楚?看完这篇文章你就懂了

熟悉CSS的同学都知道,随着时代发展CSS还延展出了一些新语言,比如SASS和LESS。但是可能很多同学并不了解他们,接下来我就会带你一起了解一下关于Css、less和Sass的相关信息。

 

 

 

背景

 

CSS(层叠样式表)是一门非程序式语言,入门学习使用非常直观方便,但是对于一些比较复杂或者重用性比较强的项目来说,因为CSS没有变量、函数、SCOPE(作用域),需要书写大量看似没有逻辑的代码,不方便维护及扩展,不利于复用,尤其对于非前端开发工程师来讲,往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码。为了方便前端开发的工作量,出现了sass和less。

 

SASS和LESS

 

SASS(英文全称:Syntactically Awesome Stylesheets)Sass 诞生于 2007 年,使用Ruby 编写,是一种对css的一种扩展提升,增加了规则、变量、混入、选择器、继承等等特性。可以理解为用js的方式去书写,然后编译成css。比如说,sass中可以把反复使用的css属性值定义成变量,然后通过变量名来引用它们,而无需重复书写这一属性值。

 

LESS(2009年开源的一个项目,受Sass的影响较大,但又使用CSS的语法,让大部分开发者和设计师更容易上手。LESS保留了css的任何功能,同时提供了多种方式能平滑的将写好的代码转化成标准的CSS代码,可以在任何使用随时切换到css的语法进行书写。

 

SASS和LESS****使用

 

传统的css可以直接被html引用,但是sass和less由于使用了类似JavaScript的方式去书写,所以必须要经过编译生成css,而html引用只能引用编译之后的css文件,虽然过程多了一层,但是毕竟sass/less在书写的时候就方便很多,所以在我们使用sass/less之前,只要我们提前设置好,就可以直接生成对应的css文件,而我们只需要关心我们的sass/less文件即可。

 

Sass的语法规则,可以参考下SASS中文网:<u>https://www.sass.hk/</u>

 

SASS技术的文件的后缀名有两种形式:.sass和.scss。其实两者都是同一种东西,两种均可以可以通过编译生成浏览器能识别的css文件。这两种的区别:

 

扩展名不同;

 

 

 

SCSS 的语法书写和CSS 语法书写方式非常类似,.sass文件对代码的排版有着非常严格的要求,而且没有大括号,没有分号;

 

 

 

Sass 语法

 

$font-stack: Helvetica, sans-serif //定义变量

 

$primary-color: #333 //定义变量

 

body

 

font: 100% $font-stack

 

color: $primary-color

 

SCSS 语法

 

$font-stack: Helvetica, sans-serif;

 

$primary-color: #333;

 

body {

 

font: 100% $font-stack;

 

color: $primary-color;

 

}

 

编译出来的 CSS

 

body {

 

font: 100% Helvetica, sans-serif;

 

color: #333;

 

}

 

LESS技术的后缀名只有一种,就是.less,语法规则和sass大同小异,详细可以参考less中文网<u>http://lesscss.cn/</u>

 

LESS使用分为两种:

 

  1. 直接在浏览器中引入less编译器js文件和less文件,直接渲染编译为css文应用到当前页面中。

 

2.less文件通过编译成为css之后引用css;

 

/* Less */

 

  @color: #999;

 

 

 

  @bgColor: skyblue;//不要添加引号

 

 

 

  @width: 50%;

 

 

 

  #wrap {

 

color: @color;

 

width: @width;

 

  }

 

/* 生成后的 CSS */

 

  #wrap {

 

 

 

    color: #999;

 

width: 50%;

 

  }

 

 

 

 

了解了这些概念问题,如果你想继续深入研究的话,自然是需要大家继续努力,关于CSS、LESS和SASS的内容还有很多,还有更多的东西等待着大家挖掘,希望你不要停止自己的脚步,在前端开发的道路上越走越远。

上一篇:浅谈Css、less和Sass(SCSS)


下一篇:十分钟看懂Css、less和Sass(SCSS)的区别