更好的为变量命名 变量是Sass中最简单的特性之一，但有时候也会使用不当。创建站点范围内有语义化的变量，是不可或缺的工作。如果命名不好，他会变得难以理解和重复使用。 这里有一些命名变量的小技巧，提供参考： 命名变量时不要含糊不清 坚持一种命名规则（Modular, BEM等等） 确定变量的使用是有道理的 这有一个好的示例： $orange: #ffa600; $grey: #f3f3f3; $blue: #82d2e5;$link-primary: $orange;$link-...
这个周学习了Less和Sass这两个css框架，我基本了解了它们各自的语法和特性，并通过两个html网页设计的练习，感受一下它们给我们开发者在进行css网页布局过程中带来的便利。下面是我对它们之间的区别的一些总结。 Less和Sass的相同之处： 1.变量：可以单独定义一系列通用的样式，在需要的时候进行调用。 2.混合（Mixins）：class中的class（讲一个class引入到另一个class，实现class与class之间的继承），还可以带参数的混合，...
光看是没用的，过不了多久就忘光光，所以还是记录一下吧。 首先windows还是离不开我，所以还是环境还是windows.. 一、SASS环境安装配置 SASS是ruby写的，所以要想将sass编译成css文件，就给配上ruby环境。 windows下载装个 rubyinstaller 就行了，注意要保证 配置好环境变量。 比如 E:\Ruby22-x64\bin 配置到系统环境变量 path中 cmd命令行执行 ruby -v 正确则安装配置正确 接下来是使用gem给我们装上...
一. Sass/Scss&Less是什么？Sass (Syntactically Awesome Stylesheets)是一种动态样式语言，语法跟css一样(但多了些功能)，比css好写，而且更容易阅读。Sass语法类似与Haml，属于缩排语法（makeup），用意就是为了快速写Html和Css。Less一种动态样式语言. 将CSS赋予了动态语言的特性，如变量，继承，运算， 函数. LESS 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox)，也可一在服务端运行 (借助 Node.js)。less英文站需要翻墙...
之前曾经安装过一次sass，不过可惜没使用，现在换了电脑重新安装，又上网找了些资料，终于安装成功，现在就当做个记录方便下次安装。 首先 到官网下载个最新版的ruby ：http://rubyinstaller.org/downloads 目前最新的稳定版是2.2.2。 下载完成后就是安装了，不过记得选择勾选Add Ruby executables to your PATH这个选项，添加环境变量，不然以后使用编译软件的时候会提示找不到ruby环境。 然后 Ruby如愿的安装成功了。...
毕业后一直从事js这一块的工作，没有写过css,对css的了解程度还停留在学校自学时的水平。基本功太差，最近开始深入学习了。 了解到sass和less比较流行，决定选一个，这俩的优劣就不讨论了。我选的sass，因为和ruby比较亲。 平常写sass的时候保存即编译这个是很有必要的，但最近我一直在用visual studio code开发，这个编辑器还不太成熟，不支持编译sass的功能，只能自己写脚本去搞了。 用gulp来干这活没什么可说的，npm上搜了一...
虽然PostCSS才是未来，但是Sass成熟稳定，拥有一大波忠实的使用者，及开源项目，且最近Bootstrap 4 alpha也从Less转到Sass了。所以了解Sass还是非常有必要的。 基于快速开发及效率，我开发环节习惯通过编辑器插件来完成Less/Sass编译，这样可以快速定位、修复Bug。 下面介绍一款Sublime Text的插件SASS build system for Sublime Text 2可以在编辑器完成Sass编译。名字是2但Sublime Text 3可用无压力。 安装Sass 首先要安装...
一直被sass的强大功能所吸引，但是在window上好像安装ruby会有各种莫名的错误，所以想迁到linux上面，但是按照百度上进行如下步骤安装的时候总是提示错误，由于我的系统上有ruby，所以我直接运行如下命令：gem install sass但是出现如下的错误： While executing gem ... (Gem::FilePermissionError) You don't have write permissions for the /var/lib/gems/2.1.0 directory. 按照字面意思应该就是权限问题了，于是我又进行下面...
原文来自这里本文综合了原文(by Jonathan Suh)以及笔者自己的理解。 Introduction 众所周知，写代码与写维护性高的代码是两回事.而涉及到响应式,代码又特别容易变的杂乱.借助sass maps所提供的拓扑功能,我们可以尝试减轻这一痛点.以下的代码还是很常见的: p { font-size: 15px; }@media screen and (min-width: 480px) { p { font-size: 16px; }}@media screen and (min-width: 640px) { p { font-size: 17px; }}@medi...
一、什么是SASS SASS是一种CSS的开发工具，提供了许多便利的写法，大大节省了设计者的时间，使得CSS的开发，变得简单和可维护。 本文总结了SASS的主要用法。我的目标是，有了这篇文章，日常的一般使用就不需要去看官方文档了。 二、安装和使用 2.1 安装 SASS是Ruby语言写的，但是两者的语法没有关系。不懂Ruby，照样使用。只是必须先安装Ruby，然后再安装SASS。 假定你已经安装好了Ruby，接着在命令行输入下面的...
Sass 是什么？ Sass 是 Syntactically Awesome Style Sheets 的缩写，它是CSS的 一个开发工具，提供了很多便利和简单的语法，让CSS看起来更像是一门语言，这种特性也被称为“CSS预编译” 。它的主要涉及思想是让我们可以按照编程的思路编写自己的样式，然后通过“编译器”生成我们所需要的CSS文件。 官网 Sass 和 SCSS 有什么区别？ Sass 和 Scss 其实是同一种东西，我们平时都称之为 Sass，两者不同之处有以...
什么是 CSS 预处理器？ 定义：CSS 预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为 CSS 增加了一些编程的特性，将 CSS 作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。 在 CSS 中使用变量、简单的逻辑程序、函数等等在编程语言中的一些基本特性，可以让你的 CSS 更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。 CSS 预处理器语言，比如说：Sass（SCSS）LESSStylusT...
声明变量定义变量的语法Sass 的变量包括三个部分： 声明变量的符号“$” 变量名称 赋予变量的值简单的示例，假设你的按钮颜色可以给其声明几个变量： 1 $brand-primary : darken(#428bca, 6.5%) !default;/* #337ab7*/2 $btn-primary-color : #fff !default;3 $btn-primary-bg : $brand-primary !default;4 $btn-primary-border : darken($btn-primary-bg, 5%) !default;5 /*如果值后面加上!default则表示默...
混合宏-声明混合宏如果你的整个网站中有几处小样式类似，比如颜色，字体等，在 Sass 可以使用变量来统一处理，那么这种选择还是不错的。但当你的样式变得越来越复杂，需要重复使用大段的样式时，使用变量就无法达到我们目了。这个时候 Sass 中的混合宏就会变得非常有意义。1、声明混合宏不带参数混合宏：在 Sass 中，使用“@mixin”来声明一个混合宏。如： 1 @mixin border-radius{2 -webkit-border-radius: 5px;3 ...
加法在 CSS 中能做运算的，到目前为止仅有 calc() 函数可行。在 Sass 中，运算只是其基本特性之一。在 Sass 中可以做各种数学计算。加法运算是 Sass 中运算中的一种，在变量或属性中都可以做加法运算。如： 1 .box {2 width: 20px + 8in;3 } 编译出来的 CSS: 1 .box {2 width: 788px;3 } 对于携带不同类型的单位时，在 Sass 中计算会报错，如下例所示： 1 .box {2 width:...