sass语法?..那么,sass语法?一起来了解一下吧。
sass (syntactically awesome stylesheets)是一种动态样式语言,语法跟css一样(但多了些功能),比css好写,而且更容易阅读。sass语法类似与haml,属于缩排语法(makeup),用意就是为了快速写html和css。
less一种动态样式语言. 将css赋予了动态语言的特性,如变量,继承,运算, 函数. less 既可以在客户端上运行 (支持ie 6+, webkit, firefox),也可一在服务端运行 (借助 node.js)。
SASS 2007年诞生,最早也是最成熟的CSS预处理器,拥有ruby社区的支持和compass这一最强大的css框架,目前受LESS影响,已经进化到了全面兼容CSS的SCSS。
LESS 2009年出现,受SASS的影响较大,但又使用CSS的语法,让大部分开发者和设计师更容易上手,在ruby社区之外支持者远超过SASS,其缺点是比起SASS来,可编程功能不够,不过优点是简单和兼容CSS,反过来也影响了SASS演变到了SCSS的时代,著名的Twitter Bootstrap就是采用LESS做底层语言的。
Stylus,2010年产生,来自Node.js社区,主要用来给Node项目进行CSS预处理支持,在此社区之内有一定支持者,在广泛的意义上人气还完全不如SASS和LESS。
LESS & Sass
LESS是受Sass启发而开发的工具,它列出了如下开发的理由:
“为什么要开发一个Sass的替代品呢?原因很简单:首先是语法。Sass的一个关键特性是缩进式的语法,这种语法可以产生柱式外观的代码。但是你需要花费时间学习一门新的语法以及重新构建你现在的样式表。
LESS给CSS带来了很多特性,使得LESS能够和CSS无缝地紧密结合在一起。因此,你可以平滑地由CSS迁移到LESS,如果你只是对使用变量或者操作感兴趣的话,你不需要学习一整门全新的语言。”
Stylus
Stylus相对前两者较新,可以看官方文档介绍的功能。
1.来自NodeJS社区,所以和NodeJS走得很近,与JavaScript联系非常紧密。还有专门JavaScript API:http://learnboost.github.io/stylus/docs/js.html
2.支持Ruby之类等等框架
3.更多更强大的支持和功能
总结:
LESS/SASS优点:
开发速度提升;
代码优化效率提高(对开发者而言);
代码更通俗易懂(对开发者而言);
维护简单便捷;
代码更干净,优美;
功能更多更强,CSS做出JS的特效(其实就是JS);
总而言之,LESS/SASS就是CSS里面的jQuery,简化,减少开发时间,提升开发者开发体验。
LESS/SASS缺点:
舍弃用户体验来提高开发的效率,可以查考Bootstrap的缺点;
舍弃网页打开速度换取开发效率提升;
需要一个学习的过程,用之不当反而弄巧反拙;
总而言之,LESS/SASS缺点就是需要多一个编译器来重新编译一次你的CSS代码,也就是给浏览器多了一道工序,网页显示的速度会减慢(网页显示顺序,从上至下,一般CSS放在头部,先HTML DOM元素-->CSS-->脚本文件-->页面元素如图片,视频,音频--->最后完全显示)
你在CSS工序加了一个步骤,速度自然慢,时间自然多了。
什么网站适合LESS/SASS,企业网站,个人网站,普通静态页。
如果淘宝用了LESS/SASS,估计淘宝每年会失去至少5千亿成交额。
Stylus功能上更为强壮,和js联系更加紧密。
普遍的三款 css 预处理器框架,分别是 sass、less css、stylus。 1. css 预处理器概述:css 预处理器是一种语言用来为 css 增加一些编程的的特性,无需考虑浏览器的兼容性问题,例如你可以在 css 中使用变量、简单的程序逻辑、函数等等在编程语言中的一些基本技巧,可以让你的 css 更见简洁,适应性更强,代码更直观等诸多好处。 总结来讲就是用编程的方法来写css样式,而不是手工一行行码,相当于从手工业时代进化到工业时代。 2. 三种css 预处理器(框架)简介: a、sass2007年诞生,最早也是最成熟的css预处理器,拥有ruby社区的支持和compass这一最强大的css框架,目前受less影响,已经进化到了全面兼容css的scss。 b、less2009年出现,受sass的影响较大,但又使用css的语法,让大部分开发者和设计师更容易上手,在ruby社区之外支持者远超过sass,其缺点是比起sass来,可编程功能不够,不过优点是简单和兼容css,反过来也影响了sass演变到了scss的时代,著名的twitter bootstrap就是采用less做底层语言的。 c、stylus,2010年产生,来自node.js社区,主要用来给node项目进行css预处理支持,在此社区之内有一定支持者,在广泛的意义上人气还完全不如sass和less。 3. stylus主要优点: 1. 简短直观,缩进让css的层次非常直观。 2. at 属性引用可以减少维护量。 3. 函数和mixin,重用的利器。 4. css 预处理器优缺点: a、可以把postcss和预处理器(sass、stylus或less)结合起来使用。 b、部分postcss插件配合预处理器将功能添加到你的工作流中,让你工作变得更加轻松。如果只使用一个预处理器,而不使用这些插件,工作流至少会变得更加困难。 c、postcss插件和喜欢的预处理器(sass、stylus或less)之一结合在一起使用。 d、在常规的预处理器通过使用混合宏或函数特性像程序一样处理代码,达到类似的结果。不过不同的是css代码,而其他一切通过插件去处理,而这个过程中不需要调用函数,也没有混合宏等等。 5. 使用技巧:sass看起来在提供的特性上占有优势,但是less能够让开发者平滑地从现存css文件过渡到less,而不需要像sass那样需要将css文件转换成sass格式。
事实证明,LESS——以及Sass——功能比这个要多太多。LESS和Sass在语法上有些共性,比如下面这些:
混入(Mixins)——class中的class;
参数混入——可以传递参数的class,就像函数一样;
嵌套规则——Class中嵌套class,从而减少重复的代码;
运算——CSS中用上数学;
颜色功能——可以编辑颜色;
名字空间(namespace)——分组样式,从而可以被调用;
作用域——局部修改样式;
JavaScript 赋值——在CSS中使用JavaScript表达式赋值。
LESS和Sass的主要不同就是他们的实现方式,LESSS是基于JavaScript,所以,是在客户端处理的。
另一方面,Sass是基于Ruby的,然后是在服务器端处理的。很多开发者不会选择LESS因为JavaScript引擎需要额外的时间来处理代码然后输出修改过的CSS到浏览器。关于这个有很多种方式,我选择的是只在开发环节使用LESS。一旦我完成了开发,我就复制然后粘贴LESS输出的到一个压缩器,然后到一个单独的CSS文件来替代LESS文件。另一个选择是使用LESS.app来编译和压缩你的LESS文件。两个选择都将最小化你的样式输出,从而避免由于用户的浏览器不支持JavaScript而可能引起的任何问题。尽管这不大可能,但终归是有可能的。
LESS Is More
介绍
在你的项目中引入LESS很简单:
下载less.js;
创建一个文件来放你的样式,比如style.less;
添加以下代码到你的HTML的
一、创建一个基于 webpack 模板的新项目
1、全局安装 vue-cli
$ npm install --global vue-cli
2、创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
3、安装依赖
$ cd my-project
$ npm install
4、为了使用sass,我们需要安装sass的依赖包
npm install --save-dev sass-loader
//sass-loader依赖于node-sass
npm install --save-dev node-sass
5、修改style标签
打开src目录下的components目录中的hello.vue文件。
然后修改 style标签如下
以上就是sass语法的全部内容, ..。