龙空技术网

「黑马程序员」「成都校区」CSS预处理器之sass的用法

黑马程序员成都中心 50

前言:

当前我们对“sass怎么用”可能比较重视,看官们都需要剖析一些“sass怎么用”的相关资讯。那么小编在网上网罗了一些有关“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

--style表示解析后的css是什么排版格式;--sourcemap表示开启sourcemap调试。开启sourcemap调试后,会生成一个后缀名为.css.map文件。

SASS提供四个编译风格的选项:

nested:嵌套缩进的css代码,它是默认值。expanded:没有缩进的、扩展的css代码。compact:简洁格式的css代码。compressed:压缩后的css代码。

四种编译排版演示:

[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.cs

//如果你有很多的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] 纯文本查看复制代码

?

1$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] 纯文本查看复制代码

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;

标签: #sass怎么用 #scsscss