翻译自官方文档： http://sass-lang.com/documentation/file.SASS_REFERENCE.html#using_sass Sass 有三种使用方式：作为命令行工具，作为独立的 Ruby 模块 (Ruby module)，或者作为 Rack-enabled 框架的插件，包括 Ruby on Rails 与 Merb。无论使用哪种方式都需要首先安装 Sass gem ： gem install sass 如果你使用的是Windows ，你可能首先需要 安装Ruby。 如果要在命令行中运行 Sass ,只要使用 sass input.scs...
Sass 3.4.22 发布。 更新： Sass now runs without warnings when running ruby with code style warnings enabled. Sass no longer watches the current working directory unless it is on the load path or the files being compiled are in the current working directory. This was causing performance issues for users with large numbers of files in their project directory. Issue #1562 , Is...
何为CSScomb 官方网站只有一句描述: Makes your code beautiful(让你的代码更漂亮) 通俗点讲: CSScomb是用来排版CSS代码的…可以说是格式化插件,依赖nodejs 获取CSScomb?这不是今天的话题 官方网站: CSScomb 支持许多编辑器,比如Sublime/Atom/brackets等 第三方CSScomb?这才是今天的话题 昨天写了篇CSS3的文章…发现代码有点混乱..人力排版有点…….所以跑去atom插件库寻找csscomb Atom -> settings -> inst...
@if @if 指令是一个SassScript,它可以根据条件处理样式块，如果条件为true返回一个样式块，反之 false 返回另一个样式块，在Sass 中除了@if之，还可以配合@else if和eles 一起。 例如： //SCSS @mixin blockOrHidden($boolean:true){ @if $boolean { @debug "$boolean is #{$boolean}"; display:block; ...
一、Less语法 1.变量声明： @变量名:变量值; 1 @newHeight:20px; 2.调用变量：1 .box {2 width: @newHeight;3 height: @newHeight; 4 } 3.多重继承（Mixins）：调用已有的类作为自己成员1 .box1 {2 .box;3 } 4.带参数函数：1 .newBox(@newWidth) {2 height: @newWidth;3 }4 .box2 {5 .newBox(20px);6 } 5.嵌套：（CSS中不能存在嵌套）1 .box1 {2 height: 200px;3 width: 10...
最近接触了Bootstrap，涉及到了LESS，CSS的预处理器使用最广泛的就是LESS和Sass，都是努力把CSS武装成为开发语言，让它从简单的描述性语言过渡到具有程序式特性的语言，主要的特性就是：变量、Mixins、嵌套、继承等。就像教程里说的：CSS的预处理器就是让CSS从设计师的工具，变为开发人员的工具。但是看完之后觉得，作为对CSS研究尚不透彻的前端小生，我最好还是不要高攀，况且在我目前的项目中拿LESS来写CSS有点儿杀鸡用牛刀的感觉...
本文主要讲解Compass的内容，众所周知Compass是Sass的工具库，如果对Sass不甚了解的同学可以移步 邂逅Sass和Compass之Sass篇 Sass本身只是一个“CSS预处理器”，Compass在它的基础上，封装了一系列的模块和模板，补充了Sass的功能。 1.Compass的安装 和Sass一样，Compass也是用Ruby语言开发的，所以在安装Sass之前必须先安装Ruby，安装Ruby的过程就不再赘述，安装好Ruby后可以直接在命令行输入下面的命令 sudo gem install compass...
在这园子里看到了很多优秀的资源，自己也想写写东西，就突然想到了以前遇到写sass的时候出现中文乱码的解决方案。所有就自己又总结了一下。(以下测试步骤都是自己完成的！没有任何转载，如有错误，希望大家指正) 简单说明下：sass来编写css样式方便了很多，让我们本来没有逻辑处理能力的css语法，在sass中编写具有了简单的逻辑处理能力. 这里sass的安装就不仔细介绍了。过程大致是这样 安装ruby --- 安装sass -- webstrom中配...
对于一个从后台转到前端的web开发者来说，最大的麻烦就是写CSS，了解CSS的人都知道，它可以开发网页样式，但是没法用它编程，感觉耦合性相当的高，如果想要方便以后维护，只能逐句修改甚至重写相当一部分的CSS。随着后台人员大量的涌入前端这个行业，CSS又焕发了新的春天，人们开始为CSS加入编程元素，也就是“CSS预处理器”。它的基本思想就是用一门专门的编程语言，进行网页样式设计，然后再编译成正常的CSS文件。下面...
一、效果图（如下）及使用的技术实现用sass实现页面中右侧固定侧边栏的样式，用require.js实现返回顶部的功能 二、sass具体的sass的介绍就不多说了，大家可以参考sass官网介绍，下面说一下sass的两种编译方法；a、koala编译koala 是一款桌面程序，支持 less 、 sass 、 coffeescript 即时编译。下载地址：http://koala-app.com/koala可以直接对scss进行编译，不需要敲命令，并且可以对scss进行监控，具体使用方法见：http://www.w3...
我本身是个新手，一边学sass一边记下的笔记，可能有点罗嗦，但是复习起来的话还是比较全面直观的。当然，最重要的还是去实践，实践得真理 其它 CSS 预处理器语言： CSS 预处理器技术已经非常的成熟，而且也涌现出了很多种不同的 CSS 预处理器语言，比如说：Sass（SCSS） LESS Stylus Turbine Swithch CSS CSS Cacheer DT CSS在众多优秀的 CSS 预处理器语言中就属 Sass、LESS 和 Stylus 最优秀，讨论的也多，对比的也多。Sass 是最早...
背景： ??初次接手公司的项目,虽然之前草草的看过一些sass的基础知识，但是因为久未征战，知识也早已随风飘散，现在小复习一下记下一些常识中的重点。。sass是使用ruby写的，所以使用前请先确保自己的机子中有了ruby的开发环境，在cmd下使用 ruby -v 命令可以查看当前的ruby版本。 简介及概述： ??sass是css的 预处理工具，当我们的css代码量很大的时候可以简化我们的开发方便后续的维护。什么是预处理工具，简单的理解就是在产生真...
github地址:https://github.com/lily1010/sass/tree/master/course03 用到的sass语法是: sass --watch test.scss:test.css --style expanded 如下图:1 导入外部文件,缺省文件后缀默认是sass/scss文件,一般在头部声明 test.scss内容是:@import "lili.scss"; //导入一个文件 @import "lili.scss", "haha.scss"; //导入两个文件 /*但在以下情况下， 仅作为普通的 CSS @import 规则语句，不会导入任何 Sass 文件。 *(1) 如果文件的扩...
github地址:https://github.com/lily1010/sass/tree/master/course02 用到的sass语法是: sass --watch test.scss:test.css --style compact --style expanded 如下图:1 类名嵌套 test.scss内容是:.test1 {font-size: .15rem;p{color: #333;.test11 {width: 3px;}} }编译成test.css内容是:.test1 {font-size: .15rem; } .test1 p {color: #333; } .test1 p .test11 {width: 3px; }2 属性嵌套 test.scss内容是:.test2 {margin: {left...
用到的sass语法是: sass --watch test.scss:test.css --style compact --style expanded 如下图:1 自定义变量 test.scss内容是:$color: black; .test1 {background-color: $color; } 编译成test.css内容是:.test1 {background-color: black; }2 在字符串内加变量 test.scss内容是:$left: left; .test2 {border-#{$left}:1px #000 solid; }编译成test.css内容是:.test2 {border-left: 1px #000 solid; }3 样式内进行加减乘除(注意...