对样式审查？很少人会这么做吧，但实际上开发者应该有这样的态度，尤其是不同团队多人开发时，这一点尤为重要。 在本文中，我将陈述两点：一是为什么我们需要对样式进行审查，二是如何将审查工具融合到整体的构建流程中（适用于 CSS，也适用于 Sass)。 简介 什么是代码审查 代码审查是一个检查代码是否符合编程规范以及查找代码错误的过程，如果要做个比喻，那么它就是编程语言的拼写检查工具。代码审查可以帮助独立开...
SASS是一种CSS的开发工具，提供了许多便利的写法，大大节省了设计者的时间，使得CSS的开发，变得简单和可维护。 SASS 官网介绍： sass is the most mature（成熟的）,stable（稳定的）,and powerful professional grade CSS extension language in the world. 官方文档： http://sass-lang.com/documentation/file.SASS_REFERENCE.html 初学sass 遇到的最大阻碍可能是：需要搭建Ruby的运行环境和需要用命令行，其实...
css 是一些非常简单得语句的组合，既然简单的语句，就不可避免的有很多重复的，冗余的东西，而且没有传统编程语言变量，控制语句等高级特性，所以造成了css 编写低效，往往需要查找替换，大量复制来修改或者编写。Sass 是用弥补这些缺陷的，使开发更加的方便快捷，更加方便管理。 1.Sass和SCSS的区别。 文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名 语法书写方式不同，...
在编译 Sass 代码时常常会碰到一些错误，让编译失败。这样的错误有系统造成的也有人为造成的，但大部分都是人为过失引起编译失败。而最为常见的一个错误就是字符编译引起的。在Sass的编译的过程中，是不是支持“GBK”编码的。所以在创建 Sass 文件时，就需要将文件编码设置为“utf-8”。另外一个错误就是路径中的中文字符引起的。建议在项目中文件命名或者文件目录命名不要使用中文字符。而至于人为失误造成的编译失败，在编译过程...
扩展/继承 继承对于了解css 的同学来说一点都不陌生，先来看一张图 在Sass 中也具有继承一说，也就是继承类中的样式代码块，在Sass中时通过关键词“@extend”来 继承已经存在的类样式块，从而实现代码的继承。 //SCSS .btn{ border:1px solid #ccc; padding:6px 10px; font-size:14px; } .btn-primarg{...
以前尝试 SASS 的时候写了一篇安装方法，大部分操作还是相同，下面补充一些内容主要是填坑，实在太TMD坑爹了。 参考这篇文章： 补充内容： 安装 SASS 和 Compass 这一步经过我昨天的测试，已经不需要修改源地址了，可以直接通过 https://rubygems.org/ 地址进行下载了，反而淘宝那个地址总是出现 SSL 相关错误，貌似HTTPS证书有问题，所以直接忽略了吧。 安装目录存在空格 如：C:\Progr...
Sass (Syntactically Awesome StyleSheets) Sass 是对 CSS 的扩展，让 CSS 语言更强大、优雅。 它允许你使用变量、嵌套规则、 mixins、导入等众多功能， 并且完全兼容 CSS 语法。 Sass 有助于保持大型样式表结构良好， 同时也让你能够快速开始小型项目， 特别是在搭配 Compass 样式库一同使用时。 CSS预处理器，重量级底层，有强大的库。 基于Ruby。 官网： http://sass-lang.com/ 国内： http://www.w3...
当你想设置属性值的时候你可以使用字符串插入进来，另一个使用的用法是构建一个选择器。 @mixin generate-sizes($class,$small,$medium,$big){ .#{$class}-small {font-size:$small;} .#{$class}-medium{ font-size:$medium} .#{$class}-big{ font-size:$big;} } ...
简单用法： 变量 sass中可以定义变量，方便统一修改和维护。 //sass style$fontStack: Helvetica, sans-serif;$primaryColor: #333;body { font-family: $fontStack; color: $primaryColor;}//css style body { font-family: Helvetica, sans-serif; color: #333;} 嵌套 sass可以进行选择器的嵌套...
SASS组件开发 SASS预处理器，增加了css所没有的编程能力，带来了前端开发的效率提高，以及扩展了css的编写技巧。 组件开发 设计一个表单提示层（包括成功success，警告warning，错误等状态error）组件，css需要定义基本样式字体（font-）、外内边距（padding，margin）、显示方式（display）、边框（border）以及其他相关的内容，再为单独的状态定义需要的样式。 css组件开发 先定义基本样式，再对每一个状态定义一...
最近开始学习并且使用，发现使用它写起css来真的是各种爽 安装sass，compass sass是依赖于ruby的，必须先安装Ruby，点击下载 下载完ruby之后，使用命令行安装sass gem install sass 使用命令，sass-v compass-v 查看是否安装成功 出现上图情况则为安装成功 sass的使用及优点 sass官网： http://www.w3cplus.com/sassguide/ sass功能： 定义变量,数值计算...
最近开始在尝试开始使用Sass来写CSS代码，刚开始虽然还是不太习惯用链式的方式写css，不过这是暂时的阶段。 如果你还不了解Sass，可以看之前发表过的文章来了解详情，Sass主要有下面这几种特性(主要内容来自这里) 左邊為原始scss檔，右邊為編譯過後的：1.Variables 變數使用$作為開頭當參數 2.Nesting 巢狀結構很清楚的知道 誰是誰的子元素，不用像以前一樣 寫一大排重復的開頭了 3.Mixins 其實就像function一...
join() 函数 join()函数是将两个列表连接合并成一个列表。 >>join(10px 20px, 30px 40px) (10px 20px 20px 40px) >>join((blue,red),(#abc,#def)) (#0000ff,#ff0000,#aabbcc,#ddeeff) 不过join()只能将两个列表连接成一个列表，如果直接连接两个以上的列表将会报错 将多个join（）函数合并在一起使用 >>join((blue red),join((#abc #def),(#dee #eff))) (#00...
sass 基于Ruby，首先需要安装Ruby。当然也有node-sass，那是另外一种使用方式了。如果能FQ的，就不用看了，主要写给翻不了墙的人用。 1.安装Ruby，ruby下载地址： http://rubyinstaller.org/downloads 2.添加镜像，淘宝镜像我试了N次都没有成功，最后用另外一个镜像试成功了。https://gems.ruby-china.org/ 。 淘宝镜像的地址：gem sources -a https://ruby.taobao.org/ ，大家可以试一下，如果能成功最好了...
Sass Maps 的函数-map-remove($map,$key),keywords($args) map-remove($map,$key) map-remove($map,$key)函数是用来删除当前$map中的某一个$key,从而得到一个新的 map,其返回的值是一个map.他并不能直接从一个map 中删除另一个map，仅能通过删除 map中的某个key 得到新的map $map:map-remove($social - colors,dribble); 返回的是一个新map $map:( ...