2019-03-27sass、compass编辑器的使用
一、 ruby安装
sass基于Ruby语言开发而成，因此安装sass前需要安装Ruby。
ruby的下载地址：<u>https://rubyinstaller.org/downloads/</u>
安装步骤：
第一步：同意协议：
图片17.png
第二步：添加环境变量
图片18.png
第三部：安装完成之后跳出界面点击finish
第四部：在弹出的命令行回车 更新数据库
第五步：检测ruby是否安装成功
在cmd输入：
ruby -v
图片19.png
输出ruby的版本表示安装成功
1．修改ruby的源
第一步：删除原有的源
gem sources --remove [<u>https://rubygems.org/</u>](https://rubygems.org/)
第二步：添加国内的源（淘宝的源已经不再维护）
gem sources -a [<u>https://gems.ruby-china.com</u>](https://gems.ruby-china.com)
第三部：检测是否换源成功
gem sources -l
image.png
输出地址一致表示换源成功。
2．安装sass
gem install sass
image.png
image.png
3．检测sass安装是否成功
sass -v
image.png
4．安装compass
gem install compass
image.png
image.png
5．检测compass是否安装成功
compass -v
image.png
6．其他命令
更新sass
gem update sass
查看sass帮助
sass -h
7．sass的编译
/单文件转换命令
sass input.scss output.css
//单文件监听命令
sass --watch input.scss:output.css
//如果你有很多的sass文件的目录，你也可以告诉sass监听整个目录：
sass --watch app/sass:public/stylesheets
8．sass的编译参数
命令行编译sass有配置选项，如编译过后css排版、生成调试map、开启debug信息等，可通过使用命令sass -v查看详细。我们一般常用两种--style``--sourcemap。
//编译格式
sass --watch input.scss:output.css --style compact
//编译添加调试map
sass --watch input.scss:output.css --sourcemap
//选择编译格式并添加调试map
sass --watch input.scss:output.css --style expanded --sourcemap
//开启debug信息
sass --watch input.scss:output.css --debug-info
--style表示解析后的css是什么排版格式;
sass内置有四种编译格式:nestedexpandedcompact``compressed。
--sourcemap表示开启sourcemap调试。开启sourcemap调试后，会生成一个后缀名为.css.map文件。
四种编译排版演示;
//未编译样式
.box {
width: 300px;
height: 400px;
&-title {
height: 30px;
line-height: 30px;
}
}
nested 编译排版格式
/命令行内容/
sass style.scss:style.css --style nested
/编译过后样式/
.box {
width: 300px;
height: 400px; }
.box-title {
height: 30px;
line-height: 30px; }
expanded 编译排版格式
/命令行内容/
sass style.scss:style.css --style expanded
/编译过后样式/
.box {
width: 300px;
height: 400px;
}
.box-title {
height: 30px;
line-height: 30px;
}
compact 编译排版格式
/命令行内容/
sass style.scss:style.css --style compact
/编译过后样式/
.box { width: 300px; height: 400px; }
.box-title { height: 30px; line-height: 30px; }
compressed 编译排版格式
/命令行内容/
sass style.scss:style.css --style compressed
/编译过后样式/
.box{width:300px;height:400px}.box-title{height:30px;line-height:30px}
9．编译sass的软件
image.png
10．在线编译sass
<u>https://www.w3cschool.cn/tryrun/sass2css</u>
image.png
11．sublime text3安装sass插件
首先你要看的是在preference选项下有没有package control这个选项，如果没有的话，就表示你没有Package Control 插件（一个方便Sublime text 管理插件的插件），这时，你就要从菜单 View - Show Console 或者 ctrl + ~ 快捷键，调出 console。将以下 Python 代码粘贴进去并 enter 执行，不出意外即完成安装。
import urllib.request,os,hashlib; h = '6f4c264a24d933ce70df5dedcf1dcaee' + 'ebe013ee18cced0ef93d5f746d80ef60'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)
如果出现以下情况，则需要手动下载安装。
image.png
下载地址：<u>https://packagecontrol.io/installation</u>
image.png
放到Sublime Text 3\Installed Packages目录中。
出现以下选项表示安装成功：
image.png
接下来安装sass：
重新打开sublime,Tools(工具) –>Command Palette(命令面板) 快捷键ctrl+shift+p，并输入install，选择第一个Install Pacage，在命令栏中输入”Sass”然后回车，然后在弹出的列表中选择Sass插件，通过鼠标单击或者回车进行安装，可通过左下角状态栏查看安装结果
同样的方法，在命令栏中输入”SassBuild”然后回车，然后在弹出的列表中选择SassBuild插件，通过鼠标单击或者回车进行安装，可通过左下角状态栏查看安装结果
查看安装的插件，按ctrl+shift+p，输入package，选择list packages，就看到了我们安装的插件列表。如果你看到了sass和sass bulid就说明插件安装成功了。安装成功后一定要重启sublime，不要在这里被坑。
有可能出现的情况：
image.png
解决办法：
下载channel_v3.json 文件，放置到任意目录，将地址写入到配置项中。
image.png
image.png
使用sass编译。
创建编译规则：
image.png
里面写入以下内容：
{
"cmd": ["sass", "--watch", "C:\\Users\\MDS\\Desktop\\day17-sass:C:\\Users\\MDS\\Desktop\\day17-sass","--style","expanded"],
"selector": "source.sass, source.scss",
"line_regex": "Line ([0-9]+):",
"osx":
{
"path": "/usr/local/bin:$PATH"
},
"windows":
{
"shell": "true"
}
}
image.png
选择编译规则：
image.png
书写scss文件：
.box {
width: 300px;
height: 400px;
&-title {
height: 30px;
line-height: 30px;
}
}
进行编译：Ctrl+B进行编译。
生成的css：
.box {
width: 300px;
height: 400px;
}
.box-title {
height: 30px;
line-height: 30px;
}
/*# sourceMappingURL=t.css.map */
12．sass编码中文乱码
CSS很好用…但是有一点不是很人性化的是,除了默认英文注释.其他注释需要设置相应的字符编码才能正确解释,否则报错
1.在原生ruby配置的scss, 文件是支持@charset 'utf-8'的
@charset “utf-8”;
- 配置整个环境
找到ruby的安装目录，里面也有sass模块，如这个路径：
C:\Ruby\lib\ruby\gems\1.9.1\gems\sass-3.3.14\lib\sass
在这个文件里面engine.rb，添加一行代码
Encoding.default_external = Encoding.find(‘utf-8’)
放在所有的require XXXX 之后即可。
二、 SASS语法
1．sass的格式
sass有两种后缀名文件：一种后缀名为sass，语法要求不使用大括号和分号；另一种就是我们这里使用的scss文件，这种和我们平时写的CSS文件格式差不多，使用大括号和分号。
//文件后缀名为sass的语法
body
background: #eee
font-size:12px
p
background: #0982c1
//文件后缀名为scss的语法
body {
background: #eee;
font-size:12px;
}
p{
background: #0982c1;
}
建议大家使用scss文件后缀。
2．sass的注释
sass的注释有两种。
//单行注释
/-------/ 多行注释
3．sass变量
1) 变量的定义与使用
Sass的变量必须是$开头，后面紧跟变量名，而变量值和变量名之间就需要使用冒号(:)分隔开（就像CSS属性设置一样）。任何可以用作css属性值的赋值都可以用作sass的变量值，甚至是以空格分割的多个属性值，或者以逗号分割的多个属性值。
$a-color: blue; // 定义变量。
.box {
color: $a-color; // => blue 使用变量
}
2) 局部变量与全局变量
变量支持块级作用域，嵌套规则内定义的变量只能在嵌套规则内使用（局部变量），不在嵌套规则内定义的变量则可在任何地方使用（全局变量）。将局部变量转换为全局变量可以添加 !global 声明。
/sass style
//-------------------------------
$a-color: blue; // 全局变量
.box {
$a-color: red; // 局部变量，box内部不使用。
color: $a-color; // => red 局部变量
}
.child {
color: $a-color; // => blue 全局变量
$main-width: 16em !global; // 在局部定义全局的变量。
}
.main {
width: $main-width; // 使用在内部定义的全局变量。
}
/*===============生成的CSS代码===================*/
.box {
color: red;
}
.child {
color: blue;
}
.main {
width: 16em;
}
3) 特殊变量
如果变量作为CSS属性或在某些特殊情况下等则必须要以 #{$variables}形式使用。
//sass style
//-------------------------------
$side: top;
.box {
border-#{$side}: 1px solid #09c;
}
//css style
//-------------------------------
.box {
border-top: 1px solid #0098cc;
}
4) 中划线与下划线
在sass的大多数地方，中划线命名的内容和下划线命名的内容是互通的，除了变量，也包括对混合器和Sass函数的命名。但是在sass中纯css部分不互通，比如类名、ID或属性名。
$link-color: blue;
a {
color: $link_color;
}
//编译后
a {
color: blue;
}
4．嵌套
1) 嵌套规则
Sass 允许将一套 CSS 样式嵌套进另一套样式中，内层的样式将它外层的选择器作为父选择器。
//sass style
//-------------------------------
#main p {
color: #00ff00;
width: 97%;
.redbox {
background-color: #ff0000;
color: #000000;
}
}
//css style
//-------------------------------
#main p {
color: #00ff00;
width: 97%;
}
#main p .redbox {
background-color: #ff0000;
color: #000000;
}
2) 父选择器（&）
在嵌套 CSS 规则时，有时也需要直接使用嵌套外层的父选择器，可以用 & 代表嵌套规则外层的父选择器。
//sass style
//-------------------------------
.box {
border-#{$side}: 1px solid #09c;
&::before {
content: '';
display: block;
position: absolute;
left: 100px;
top: 5px;
}
}
//css style
//-------------------------------
.box {
border-top: 1px solid #09c;
}
.box::before {
content: '';
display: block;
position: absolute;
left: 100px;
top: 5px;
}
& 必须作为选择器的第一个字符，其后可以跟随后缀生成复合的选择器。
/sass style
//-------------------------------
#main {
color: black;
&-sidebar { border: 1px solid; }
}
//css style
//-------------------------------
#main {
color: black;
}
#main-sidebar {
border: 1px solid;
}
父选择器标识符还有另外一种用法，你可以在父选择器之前添加选择器。
#content aside {
color: red;
body.ie & { color: green }
}
/*编译后*/
#content aside {color: red};
body.ie #content aside { color: green }
3) @at-root
@at-root用来跳出当前选择器嵌套。
//sass style
//-------------------------------
.demo {
...
animation: motion 3s infinite;
@at-root {
@keyframes motion {
...
}
}
}
//css style
//-------------------------------
.demo {
...
animation: motion 3s infinite;
}
@keyframes motion {
...
}
4) 子组合选择器
article section { margin: 5px }
5) 同层组合选择器：>、+和~
上边这三个组合选择器必须和其他选择器配合使用，以指定浏览器仅选择某种特定上下文中的元素。
可以用子组合选择器>选择一个元素的直接子元素。
可以用同层相邻组合选择器+选择一个元素后紧跟的某一类元素
以用同层全体组合选择器~，选择所有跟在指定元素后的同层某类元素，不管它们之间隔了多少其他元素:
article {
~ article { border-top: 1px dashed #ccc }
> section { background: #eee }
dl > {
dt { color: #333 }
dd { color: #555 }
}
nav + & { margin-top: 0 }
}
//sass编译后
rticle ~ article { border-top: 1px dashed #ccc }
article > footer { background: #eee }
article dl > dt { color: #333 }
article dl > dd { color: #555 }
nav + article { margin-top: 0 }
5．运算
Sass支持多种数据类型的变量，比如：
数字，1, 2, 13, 10px
字符串，有引号字符串与无引号字符串，"foo", 'bar', baz
颜色，blue, #04a3f9, rgba(255,0,0,0.5)
布尔型，true, false
空值，null
所有数据类型均支持相等运算 == 或 !=，此外，每种数据类型也有其各自支持的运算方式。
1) 数值运算
Sass支持数字的加减乘除、取整等运算 (+, -, *, /, %)，如果必要会在不同单位间转换值。
//sass style
//-------------------------------
.box {
height: 17px + 20px; // => 37px 数字加法运算
width: (75rem/16); // => 4.6875rem 除法运算
color: #303030*2; // => #606060; 乘法运算（颜色运算）
padding: 20px - 3; // => 17pex 数字减法
font-family: sans- + "serif"; // => sans-serif 字符串加法
width: 1em + (2em * 3); // 带括号的运算
}
//css style
//-------------------------------
.box {
height: 37px;
width: 4.6875rem;
color: #606060;
padding: 17px;
font-family: sans-serif;
width: 7em;
}
6．条件语句
sass具有条件语句，当 @if 的表达式返回值不是 false 或者 null 时，条件成立，输出 {} 内的代码。
//sass style
//-------------------------------
$w: 960px;
$type: monster;
.box {
@if 2*3 > 5 { // 简单if判断语句
color: red;
}
@if $w > 900px {
width: $w;
} @else { // if else 语句
width: 900px;
}
@if $type == ocean { // 多个if和else语句
color: blue;
} @else if $type == matador {
color: red;
} @else if $type == monster {
color: green;
} @else {
color: black;
}
}
//css style
//-------------------------------
.box {
color: red;
width: 960px;
color: green;
}
说明：@if 声明后面可以跟多个 @else if 声明，或者一个 @else 声明。
如果 @if 声明失败，Sass 将逐条执行 @else if 声明，如果全部失败，最后执行 @else 声明
7．循环语句
@for 指令可以在限制的范围内重复输出格式。类似for循环。
两种格式：
@for $var from <start> through <end> :条件范围包含 <start> 与 <end> 的值
/scss style
//------------for througth循环-------------------
@for $i from 1 through 3 {
.item-#{$i} { width: 2em * $i; }
}
//css style
//-------------------------------
.item-1 { width: 2em; }
.item-2 { width: 4em; }
.item-3 { width: 6em; }
@for $var from <start> to <end>: 围只包含 <start> 的值不包含 <end> 的值
//scss style
//------------for to 循环-------------------
@for $i from 1 to 3 {
.item-#{$i} { width: 2em * $i; }
}
//css style
//-------------------------------
.item-1 { width: 2em; }
.item-2 { width: 4em; }
8．遍历
@each 指令的格式是 var 可以是任何变量名，比如
name，而 <list> 是一连串的值，也就是值列表。
//sass style
//-------------------------------
@each $animal in puma, sea-slug, egret, salamander {
.#{$animal}-icon {
background-image: url('/images/#{$animal}.png');
}
}
//css style
//-------------------------------
.puma-icon {
background-image: url("/images/puma.png");
}
.sea-slug-icon {
background-image: url("/images/sea-slug.png");
}
.egret-icon {
background-image: url("/images/egret.png");
}
.salamander-icon {
background-image: url("/images/salamander.png");
}
复杂对应each
//sass style
//-------------------------------
@each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) {
#{$header} {
font-size: $size;
}
}
//css style
//-------------------------------
h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.2em; }
9．混合指令
利用混合器，可以很容易地在样式表的不同地方共享样式。如果你发现自己在不停地重复一段样式，那就应该把这段样式构造成优良的混合器，尤其是这段样式本身就是一个逻辑单元，比如说是一组放在一起有意义的属性。判断一组属性是否应该组合成一个混合器，一条经验法则就是你能否为这个混合器想出一个好的名字。
1) 不带参数的简单Mixin
混合指令（Mixin）用于定义可重复使用的样式，可以直接把一整段Sass代码替换到某个地方去。
//sass style
//-------------------------------
// 定义mixin reset, 用@mixin开头，后面跟空格和混合块的名字。然后是语句块
@mixin reset {
padding: 0;
margin: 0;
}
html, body, div , input {
@include reset(); // 引用 reset 混合块。用@include指令引用混合块。
}
//css style
//-------------------------------
html, body, div, input {
padding: 0;
margin: 0;
}
2) 带参数的mixin
Mixin还可也添加参数，跟函数一样使用。
//sass style
//-------------------------------
@mixin sexy-border($color, $width) {
border: $width solid $color;
}
p { @include sexy-border(blue, 1px); }
//css style
//-------------------------------
p {
border: 1px solid blue;
}
3) 默认参数的mixin
@mixin link-colors(
$normal,
$hover: $normal,
$visited: $normal
)
{
color: $normal;
&:hover { color: $hover; }
&:visited { color: $visited; }
}
4) 函数指令
虽然Mixin功能强大，但是某些场景下还是函数应用更方便，Sass也提供了自定义函数的用法。
//sass style
//-------------------------------
$grid-width: 40px;
$gutter-width: 10px;
// 定义自定义函数 grid-width
@function grid-width($n) { // 接受一个参数$n
@return $n * $grid-width + ($n - 1) * $gutter-width; // 返回值。
}
#sidebar { width: grid-width(5); } // 在属性中调用函数
//css style
//-------------------------------
#sidebar {
width: 240px;
}
4．继承（扩展）
1) 基本继承
sass中，选择器继承可以让选择器继承另一个选择器的所有样式，并联合声明。使用选择器的继承，要使用关键词 @extend，后面紧跟需要继承的选择器。
//sass style
//-------------------------------
h1{
border: 4px solid #ff9aa9;
}
.speaker{
@extend h1;
border-width: 2px;
}
//css style
//-------------------------------
h1, .speaker{
border: 4px solid #ff9aa9;
}
.speaker{
border-width: 2px;
}
2) %占位符
以定义占位选择器 %。这种选择器的优势在于：如果不调用则不会有任何多余的css文件，避免了以前在一些基础的文件中预定义了很多基础的样式，然后实际应用中不管是否使用了 @extend去继承相应的样式，都会解析出来所有的样式。占位选择器以 %标识定义，通过 @extend调用。
//sass style
//-------------------------------
%ir { // 定义占位符。没有选择器名字的一段代码而已。
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
}
#header{
h1{
@extend %ir;
width:300px;
}
}
.ir{
@extend %ir;
}
//css style
//-------------------------------
#header h1, .ir {
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
}
#header h1 {
width: 300px;
}
11．文件导入
Sass的导入( @import)Sass文件规则和CSS的有所不同，编译时会将 @import的scss文件合并进来只生成一个CSS文件。
但是如果你在Sass文件中导入css文件如 @import 'reset.css'，那效果跟普通CSS导入样式文件一样，导入的css文件不会合并到编译后的文件中，而是以 @import方式存在。
所有的Sass导入文件都可以忽略后缀名 .scss。一般来说基础的文件命名方法以_开头，如 _mixin.scss。这种文件在导入的时候可以不写下划线，可写成 @import "mixin"。
//sass style
//-------------------------------
@import "reset.css"; // 导入css文件，不会进行编译。
@import "a"; // 导入a.scss 文件，后缀省略
p{
background: #0982c1;
}
//css style
//-------------------------------
@import "reset.css";
body {
background: #eee;
}
p{
background: #0982c1;
}
三、 Compass
Compass是一个强大的Sass框架,它的设计目标是顺畅、高效地装扮互联网,使用它的人可写出可维护性更高的样式表。
Compass 七大模块：
Reset
Layout
CSS3
Helpers
Typography
Utilities
Browser
Compass 核心模块
Reset
Layout
@import "compass/reset"
@import "compass/layout"
Browser 模块：
Browser 用来配置compass默认支持哪些浏览器,对于特定浏览器,默认支持到哪个版本.
Browser 中的配置一旦修改,将影响其余6个模块的输出,因为需要针对不同的浏览器做不同的适配.
reset模块：
reset 是 compass 内置的，如果我们想修改为 normalize。
命令行使用 gem install compass-normalize
然后在 config.rb 配置文件中添加
require 'compass-normalize'
然后在 scss 文件中 @import "normalize";
layout 模块：
如果说 reset 模块是 compass 中使用起来最简单的模块，那么，layout 模块则是 compass 中使用率最低的模块。Layout 模块用来实现页面布局控制的。
CSS3模块：
如果说 Layout 模块是 compass 中使用率最低的模块，那么，CSS3 模块肯定是主动使用率最高的模块。
CSS3 模块主要用于提供跨浏览器的 CSS3 能力。
Typography 模块：
Typography 模块主要用来修饰文本样式、垂直韵律等(Links、Lists、Text、Vertical Rhythm)
Utilities 模块：
Utilities 模块是辅助工具类函数
helpers 模块：
helpers 类里面多是函数，utilities 里面多是 mixin，包含：
Color : 颜色相关的工具集合
Print : 打印控制的集合
Tables : table样式相关的集合(table model)
Geeneral : 通用的一般类的工具(跨浏览器的清除浮动)
Sprites : 精灵图合图相关的工具集合(重点)
1．创建一个Compass项目
确保电脑已经安装Ruby环境，并且安装了Sass和Compass
compass create sample //sample代表自己的文件
2．compass命令
compass编译。
进入项目根目录：
cd sample //cd代表上一层
执行编译
compass compile
编译输出格式：
--output-style compressed 输出压缩格式
Compass只编译发生变动的文件，如果你要重新编译未变动的文件，需要使用--force参数。
compass compile --force
除了使用命令行参数，还可以在配置文件config.rb中指定编译模式。
output_style = :expanded
config.rb的配置文件可以这样设置，可以通过指定environment的值（:production或者:development），智能判断生成的stylesheets文件夹里面的编译模式（是开发环境模式，还是压缩输出模式）。
# environment = :development //用以开发环境
environment = :production //使用压缩输出模式
output_style = (environment == :production) ? :compressed : :expanded
监听命令：运行该命令后，只要scss文件发生变化，就会被自动编译成css文件。
compass watch
image.png
3．一些其他的命令
compass init——为一个已经存在的项目（Rails）添加compass；
compass clean——移除生成的文件和缓存；
compass stats——查看样式表的统计数据；
compass unpack <extension>——解压扩展到你的项目；
compass validate——验证你生成的CSS文件；
compass version——显示版本、许可证，等等；
compass interactive——进入一个用于测试Compass中SassScript的控制台。
compass help <具体命令>——获得帮助/具体命令的详细描述
4．使用Compass解决真实的CSS问题
1) 样式重置
compass的样式重置：在css中将body、html、ul、ol、等标签的在css中的边框、样式都清除。
@import "compass/reset"
通过Sass引入命令@import引入Compass的重置模块;
reset模块是Compass框架中独立的一部分,可被随意引用到项目中;
通过加入这行代码,生成的CSS文件中就会包含CSS重置部分的代码;
@include reset-html5
输出文件中会生成额外的CSS规则来对HTML5的元素进行基本的样式修改,
2) 引入基本布局--Blueprint网格布局
compass create my_grid --using blueprint
@include column($sidebar-columns);
3) 通过表格辅助器为表格添加更加专业的斑马条纹样式
@import "compass/utilities/tables";
table {
$table-color:#666; // 定义变量;
@include table-scaffolding; // 引入混合器;提供最基本的样式修饰;
@include inner-table-borders(1px, darken($table-color,40%));// 添加单元格边框;
@include outer-table-borders(2px); // 添加表格边框;
@include alternating-rows-and-columns($table-color,adjust-hue($table-color,-120deg),#222); // 添加斑马条纹样式;
}
4) CSS3前缀支持
@import "compass/css3"
Sass:
.rounded {
@include border-radius(5px);
}
CSS:
.rounded {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
border-radius: 5px;
}
