黑马程序员技术交流社区

标题: 【成都校区】CSS预处理器之sass的用法 [打印本页]
作者: 小刀葛小伦    时间: 2019-8-29 14:58
标题: 【成都校区】CSS预处理器之sass的用法
一、什么是SASS
Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库（如 Compass）有助于更好地组织管理样式文件，以及更高效地开发项目。

二、安装Sass和Compass2.1 安装sass基于Ruby语言开发而成，因此安装sass前需要安装Ruby。（注:mac下自带Ruby无需在安装Ruby!）
但是两者的语法没有关系。不懂Ruby，照样使用。
假定你已经安装好了Ruby，Ruby自带一个叫做RubyGems的系统，用来安装基于Ruby的软件。我们可以使用这个系统来 轻松地安装Sass和Compass。要安装最新版本的Sass和Compass，你需要输入下面的命令：
[JavaScript] 纯文本查看 复制代码
// 安装如下(如mac安装遇到权限问题需加 sudo gem install sass)

gem install sass

gem install compass

然后，就可以使用了。
2.2 编译Sasssass编译有很多种方式，如命令行编译模式、sublime插件SASS-Build、编译软件koala、前端自动化软件codekit、Grunt打造前端自动化工作流grunt-sass、Gulp打造前端自动化工作流gulp-ruby-sass等。
下面的命令，可以在屏幕上显示.scss文件转化的css代码。（假设文件名为input.scss。）

[JavaScript] 纯文本查看 复制代码
// 单文件转换命令

sass input.scss output.css



命令行编译配置选项: 命令行编译sass有配置选项，如编译过后css排版、生成调试map、开启debug信息等，可通过使用命令sass -v查看详细。我们一般常用两种--style、--sourcemap
[JavaScript] 纯文本查看 复制代码
//编译格式

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

SASS提供四个编译风格的选项：
四种编译排版演示:
[CSS] 纯文本查看 复制代码
//未编译样式

.box {

  width: 300px;

  height: 400px;

  &-title {

    height: 30px;

    line-height: 30px;

  }

}

nested 编译排版格式
[CSS] 纯文本查看 复制代码
/*命令行内容*/

sass style.scss:style.css --style nested



/*编译过后样式*/

.box {

  width: 300px;

  height: 400px; }

  .box-title {

    height: 30px;

    line-height: 30px; }

expanded 编译排版格式
[CSS] 纯文本查看 复制代码
/*命令行内容*/

sass style.scss:style.css --style expanded



/*编译过后样式*/

.box {

  width: 300px;

  height: 400px;

}

.box-title {

  height: 30px;

  line-height: 30px;

}

compact 编译排版格式
[CSS] 纯文本查看 复制代码
/*命令行内容*/

sass style.scss:style.css --style compact



/*编译过后样式*/

.box { width: 300px; height: 400px; }

.box-title { height: 30px; line-height: 30px; }

compressed 编译排版格式
[CSS] 纯文本查看 复制代码
/*命令行内容*/

sass style.scss:style.css --style compressed



/*编译过后样式*/

.box{width:300px;height:400px}.box-title{height:30px;line-height:30px}

生产环境当中，一般使用最后一个选项。
[JavaScript] 纯文本查看 复制代码
sass --style compressed test.sass test.css

你也可以让SASS监听某个文件或目录，一旦源文件有变动，就自动生成编译后的版本。
[JavaScript] 纯文本查看 复制代码
//单文件监听命令

sass --watch input.scss:output.css



//如果你有很多的sass文件的目录，你也可以告诉sass监听整个目录：

sass --watch app/sass:public/stylesheets

SASS的官方网站，提供了一个在线转换器。你可以在那里，试运行下面的各种例子也可以去（Sass中文文档）试试。
三、基本用法3.1 变量sass使用$符号来标识变量(老版本的sass使用!来标识变量。改成$是多半因为!highlight-color看起来太丑了。)，比如$highlight-color和$sidebar-width。为什么选择$ 符号呢？因为它好认、更具美感，且在CSS中并无他用，不会导致与现存或未来的css语法冲突。
sass变量的声明和css属性的声明很像：
[CSS] 纯文本查看 复制代码
$highlight-color: #F90;

这意味着变量$highlight-color现在的值是#F90。任何可以用作css属性值的赋值都 可以用作sass的变量值，甚至是以空格分割的多个属性值，如$basic-border: 1px solid black;，或以逗号分割的多个属性值，如$plain-font: "Myriad Pro"、Myriad、"Helvetica Neue"、Helvetica、"Liberation Sans"、Arial和sans-serif; sans-serif;。这时变 量还没有生效，除非你引用这个变量——我们很快就会了解如何引用。
[CSS] 纯文本查看 复制代码
$color : #1875e7; 



div {

    color : $color;

}

如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中。
[CSS] 纯文本查看 复制代码
$side : left;



.rounded {

    border-#{$side}-radius: 5px;

}

3.2 计算
[CSS] 纯文本查看 复制代码
$var: 10px;

div {

    margin: (28px/2);

    position: absolute;

    top: 30px + 20px;

    left: $var + 20px;

}

3.3 嵌套CSS 规则
在Sass中，你可以像俄罗斯套娃那样在规则块中嵌套规则块。sass在输出css时会帮你把这些嵌套规则处理好，避免你的重复书写。
[CSS] 纯文本查看 复制代码
#content {

  article {

    h1 { color: #333 }

    p { margin-bottom: 1.4em }

  }

  aside { background-color: #EEE }

}
[CSS] 纯文本查看 复制代码
/* 编译后 */

#content article h1 { color: #333 };

#content article p { margin-bottom: 1.4em };

#content aside { background-color: #EEE };
属性也可以嵌套，比如border-color属性，可以写成：
[CSS] 纯文本查看 复制代码
p {

    border: {

        color: blue

    }

}
注意，border后面必须加上冒号。
在使用嵌套规则时，父选择器能对于嵌套规则如何解开提供更好的控制。它就是一个简单的&符号，且可以放在任何一个选择器可出现的地方。
[CSS] 纯文本查看 复制代码
article a {

  color: blue;

  &:hover { color: red }

}
在为父级选择器添加:hover等伪类时，这种方式非常有用。同时父选择器标识符还有另外一种用法，你可以在父选择器之前添加选择器。举例来说，当用户在使用IE浏览器时，你会通过JavaScript在<body>标签上添加一个ie的类名，为这种情况编写特殊的样式如下：
[CSS] 纯文本查看 复制代码
#content aside {

  color: red;

  body.ie & { color: green }

}

3.4 静默注释css中注释的作用包括帮助你组织样式、以后你看自己的代码时明白为什么这样写，以及简单的样式说明。但是，你并不希望每个浏览网站源码的人都能看到所有注释。
sass另外提供了一种不同于css标准注释格式/* ... */的注释语法，即静默注释，其内容不会出现在生成的css文件中。静默注释的语法跟JavaScript、Java等类C的语言中单行注释的语法相同，它们以//开头，注释内容直到行末。

[CSS] 纯文本查看 复制代码
body {

  color: #333; // 这种注释内容不会出现在生成的css文件中

  padding: 0; /* 这种注释内容会出现在生成的css文件中 */

}

实际上，css的标准注释格式/* ... */内的注释内容亦可在生成的css文件中抹去。当注释出现在原生css不允许的地方，如在css属性或选择器中，sass将不知如何将其生成到对应css文件中的相应位置，于是这些注释被抹掉。
[CSS] 纯文本查看 复制代码
body {

  color /* 这块注释内容不会出现在生成的css中 */: #333;

  padding:  /* 这块注释内容也不会出现在生成的css中 */ 0;

}









欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2