Css、less和Sass(SCSS)的区别

时间:2020-08-03 11:18:28 来源:

【摘要】 Css、less和Sass(SCSS)的区别考必过小编为大家整理了关于Css、less和Sass(SCSS)的区别的信息,希望可以帮助到大家!

Css、less和Sass(SCSS)的区别

标签:scss   htm   就是   中文   切换   class   规则   区别   stack   

随着前端开发的不断发展,CSS也逐渐延伸出了很多新的语言,

less和Sass就是其中两种,下面我们就一起来看看它们到底有何区别。

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技术的文件的后缀名有两种形式:.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><u>http://lesscss.cn/</u></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%;

}
关于SASS和LESS的概念就是这样,如果想要继续深入了解更详细语法,恐怕就得多花功夫了,不过,学好SASS和LESS对你的前端发展绝对是有很大帮助的。加油,努力成为前端大神。

Css、less和Sass(SCSS)的区别

标签:scss   htm   就是   中文   切换   class   规则   区别   stack   

以上就是Css、less和Sass(SCSS)的区别的内容,更多资讯请及时关注考必过网站,最新消息小编会第一时间发布,大家考试加油!

上一篇      下一篇
前端相关推荐 更多>>
前端热点专题 更多>>
热点问答
国家公务员考试年龄限制是多少 公务员国考和省考考试内容有什么区别 函授大专学历能不能考公务员 国家公务员考试考点能自己选择吗 新闻学专业能报考2022年公务员考试吗 什么是联合培养研究生 什么是破格录取研究生 什么人不适合读研 研究生报名户口所在地填什么 研究生结业和毕业有什么区别
网站首页 网站地图 返回顶部
考必过移动版 https://m.kaobiguo.net