CSS 预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为 CSS 增加了一些编程的特性,将 CSS 作为目标生成文件,然后开发者就只要使用这种语言进行编码工作。

通俗的说,“CSS 预处理器用一种专门的编程语言,进行 Web 页面样式设计,然后再编译成正常的 CSS 文件,以供项目使用。CSS 预处理器为 CSS 增加一些编程的特性,无需考虑浏览器的兼容性问题”,例如你可以在 CSS 中使用变量简单的逻辑程序函数(如右侧代码编辑器中就使用了变量$color)等等在编程语言中的一些基本特性,可以让你的 CSS 更加简洁适应性更强可读性更佳更易于代码的维护等诸多好处。

其它 CSS 预处理器语言:

CSS 预处理器技术已经非常的成熟,而且也涌现出了很多种不同的CSS 预处理器语言,比如说:

  • Sass(SCSS)
  • LESS
  • Stylus
  • Turbine
  • Swithch CSS
  • CSS Cacheer
  • DT CSS

如此之多的 CSS 预处理器,那么“我应该选择哪种 CSS 预处理器?”也相应成了最近网上的一大热门话题,在 LinkedinTwitterCSS-Trick知乎以及各大技术论坛上,很多人为此争论不休。相比过去我们对是否应该使用 CSS 预处理器的话题而言,这已经是很大的进步了。

到目前为止,在众多优秀的 CSS 预处理器语言中就属 SassLESS和 Stylus 最优秀,讨论的也多,对比的也多。

SCSS的更多相关文章

  1. Vue ES6 Jade Scss Webpack Gulp

    一直以来非常庆幸曾经有翻过<代码大全2>:这使我崎岖编程之路少了很多不必要的坎坷.它在软件工艺的话题中有写到一篇:"首先是为人写程序,其次才是机器(Write Programs ...

  2. Ruby安装Scss

    Ruby安装Scss 引言 已经许久不写HTML了,今天有点以前的东西要改.但是刚装的Windows10,已经没有以前的Web开发环境了.只好重新安装. 结果Webstorm装好后配置Scss出现错误 ...

  3. CSS预处理框架:less,scss

    CSS预处理器:less和sass:CSS 预处理器是一种语言用来为 CSS 增加一些编程的的特性,无需考虑浏览器的兼容性问题,例如你可以在 CSS 中使用 变量.简单的程序逻辑.函数等等在编程语言中 ...

  4. sass/scss 和 less的区别

    一. Sass/Scss.Less是什么? Sass (Syntactically Awesome Stylesheets)是一种动态样式语言,Sass语法属于缩排语法,比css比多出好些功能(如变量 ...

  5. 关于webpack编译scss文件

    css加载器文件通常和extract-text-webpack-plugin一块使用,我们可以在源文件src目录下写scss文件,然后通过webpack编译成css文件到输出目录public,这个目录 ...

  6. Webstorm配置CSS/SCSS自动补全兼容前缀autoprefixer插件

    关于Autoprefixer Autoprefixer是一个后处理程序,不象Sass以及Stylus之类的预处理器.它适用于普通的CSS,可以实现css3代码自动补全.也可以轻松跟Sass,LESS及 ...

  7. webstorm 配置scss的问题

    第一种方法(ruby方法) 先安装ruby,在windows/system32目录下 1.先查询源是什么 gem sources 2.移除原有的源头 gem sources -r http://xxx ...

  8. scss编译

    SASS?SASS是一种CSS的开发工具,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护. sass有两种后缀名文件: sass(不使用大括号和分号)---不建议使用 ...

  9. Scss开发临时学习过程

    SCSS语法: 假设变量申明带有!default,那么如果在此申明之前没有这个变量的申明,则用这个值,反之如果之前有申明,则用申明的值. ‘...’传递多个参数: @mixin box-shadow( ...

随机推荐

  1. angular的双向数据绑定

    方向1:模型数据(model) 绑定 到视图(view) 实现方法1:{{model变量名}} $scope.num=10 <p>{{num}}</p> 实现方法2: 常用指令 ...

  2. Bootstrap_Javascript

    弹窗 一. 结构分析 Bootstrap框架中的模态弹出框,分别运用了“modal”.“modal-dialog”和“modal-content”样式,而弹出窗真正的内容都放置在“modal-cont ...

  3. Cheatsheet: 2016 08.01 ~ 08.31

    .NET Getting Started with ASP.NET Core and VS Code Coding Standard Best Practices In C# Wire – Writi ...

  4. NHibernate Query

    1) Sql Group by .... 之前是这么写的,因为DateTime是YYYY-MM-DD HH:mm:SS 模式,我只想group 日期.这种写法再mysql,sqlserver.orac ...

  5. 解决iphone5s,iphone6不能使用luajit及luac的问题

    做手游有小段时间了,感觉坤哥给这么多的机会.一直都比较忙项目的事,比较没时间去写点东西做点记录.想想还是写点开发问题记录比较好,可以很简短,也可以很有用. 我们项目采用的cocos2d-x的引擎,之前 ...

  6. LayoutInflater的使用

    在实际工作中,事先写好的布局文件往往不能满足我们的需求,有时会根据情况在代码中自定义控件,这就需要用到LayoutInflater.LayoutInflater在Android中是“扩展”的意思,作用 ...

  7. iOS - QRCode 二维码

    1.QRCode 在 iOS7 以前,在 iOS 中实现二维码和条形码扫描,我们所知的有,两大开源组件 ZBar 与 ZXing. 这两大组件我们都有用过,这里总结下各自的缺点: 1.ZBar 在扫描 ...

  8. 文件上传(excel服务端解析)

    1,html结构 <!-- 引入jQuery和jQuery.form.js插件 --><script type="text/javascript" src=&qu ...

  9. Java学习之Iterator(迭代器)的一般用法 (转)

    迭代器(Iterator) 迭代器是一种设计模式,它是一个对象,它可以遍历并选择序列中的对象,而开发人员不需要了解该序列的底层结构.迭代器通常被称为"轻量级"对象,因为创建它的代价 ...

  10. Struts2标签之Checkbox

    <s:checkbox name="permisskey" label="帅哥" value="true" fieldValue=&q ...