1.安装ruby
sass基于Ruby语言开发而成,因此安装sass前需要安装Ruby。(注:mac下自带Ruby无需在安装Ruby!) window下安装SASS首先需要安装Ruby,先从官网下载Ruby并安装。安装过程中请注意勾选Add Ruby executables to your PATH添加到系统环境变量。 安装完成后需测试安装有没有成功,运行CMD输入以下命令:
ruby -v
//如安装成功会打印
ruby 2.6.4p104 (2019-08-28 revision 67798) [x64-mingw32]
2.下载sass
打开命令行工具
gem install sass
//确认是否安装成功,显示版本号即安装成功
sass -v
//在终端开启Sass环境
sass -i
3.自动编译scss文件输出为css文件
<!-- 默认输出css文件有四种格式:nested,嵌套 compact,紧凑 expanded,扩展 compressed,压缩
默认嵌套格式 -->
sass --watch sass/style.scss:css/style.css
<!-- ctrl+C退出再输入 -->
sass --watch sass:css --style compact
4..sass与.scss的区别
@mixin button-base() {
@include typography(button);
@include ripple-surface;
@include ripple-radius-bounded;
display: inline-flex;
position: relative;
height: $button-height;
border: none;
vertical-align: middle;
&:hover { cursor: pointer; }
&:disabled {
color: $mdc-button-disabled-ink-color;
cursor: default;
pointer-events: none;
}
}
@mixin button-base()
@include typography(button)
@include ripple-surface
@include ripple-radius-bounded
display: inline-flex
position: relative
height: $button-height
border: none
vertical-align: middle
&:hover
cursor: pointer
&:disabled
color: $mdc-button-disabled-ink-color
cursor: default
pointer-events: none
5.sass语法
1.变量variables
$primary-color: #000;
div {
color: $primary-color;
}
2.嵌套nesting
请见3.嵌套时调用父选择器
3.嵌套时调用父选择器
// 使用&引用父选择器
.nav {
width: 100px;
ul {
margin: 0;
li {
list-style: none;
a {
color: #000;
&:hover {
color: #fff;
}
}
}
}
& &-text {
font-size: 18px;
}
}
4.嵌套属性
body {
font: {
family: Arial;
size: 15px;
weight: normal;
}
}
.nav {
border: solid 1px #ccc {
left: 0;
right: 0;
}
}
5.mixin混合
// 语法
@mixin 名字 (参数1, 参数2, ...) {
...
}
// example
@mixin alert($text-color, $background) {
color: $text-color;
background-color: $background;
a {
color: darken($text-color, 10%);
}
}
// 匿名传参
.alert-warning {
@include alert(#a18355, #f00);
}
// 具名传参
.alert-info {
@include alert($background:#d94325, $text-color:#929500)
}
6.继承、扩展-inheritance
// @extend不仅继承选择器样式,还集成相关选择器的样式
.alert {
padding: 15px;
}
.alert a {
font-weight: bold;
}
.alert-info {
@extend .alert;
background-color: #fff;
}
7.Partials与@import
css原本也具有import功能,实现css的模块化,但是每一次import都需要发送一次http请求,消耗资源。在sass中的import文件是作为文件的一部分,在编译时只情求一次。
// common.scss为被文件,可省略扩展名
@import "common";
8.comment注释
sass文件编译成scss文件时会删除scss文件里的单行注释,只保留多行注释,但是在compressed格式时,多行注释也会被删除,要想保留注释,需要使用/*! */
9.sass数据类型
- Null
null是Sass中最基本的数据类型,它既不是true也不是false,而表示的是空。它没有任何值。你应该知道,任何变体的null,甚至是一个字母都不存在的情况也不会视为空。这也意味着NULL或Null实际上是null,他们都是字符串。 尽管null表示什么都没有,但当使用length(..)还是会返回length为1。这是因为null仍然表示的是一个真实存在的实体,只不过它不代表任何东本。同样,你不能使用null来连接其他字符串,出于这个原因,你要是使用text + null,在编译Sass的时候将会报错。
- Booleans
这个数据类型只有两个值:true和false。在Sass中,只有自身是false和null才会返回false,其他一切都将返回true,比如:
$i-am-true: true;
$a-number: 2;
body {
@if not $i-am-true {
background: rgba(255, 0, 0, 0.6);
} @else {
background: rgba(0, 0, 255, 0.6); // expected
}
}
.warn {
@if not $a-number {
color: white;
font-weight: bold;
font-size: 1.5em;
} @else {
display: none; // expected
}
}
在这里,使用了两个变量i−am−true和a-number。在解释代码之前,要提一下not操作符,Sass中的not操作符和其他语言的作用类似。因此,@if not i−am−true等同于if(!i-am-true)。最终得到的值是false,那是因为$i-am-true的值是true。这样就会产生一个blue的背景色。
正如前面提到的,除了null和false之外,其他的都是true。这就意味着$a-number等于true,这样一来,还有.warn类名的段落(p)就不会显示。
- Number
数字在CSS中使用很广泛,大部分都是结合CSS的单位一起使用,但在技术上而言它依然算是数字。同样的,在Sass中也有数字类型(Number)。这样你可以做一些基本的数学运算。
要记住的一件事是,你只要操作数字和兼容的单位,这样都是有效的,如:
$size: 18; // A number
$px-unit: $size * 1px; // A pixel measurement
$px-string: $size + px; // A string
$px-number: $px-unit / 1px; // A number
上面代码声明了四个变量。size是一个数字。px-unit将size和1px做乘法,这样将会转找成一个尺寸测量值。px-string 和单位px相加,它将转换为18px,变成一个字符串,而不是一个数字。这主要是px本身在Sass中被视为是字符串,那么数字和字符串相加就会变成字符串。px−number是使用px-unite除以1px, 它又将变回是一个数字18。
比如下面的示例,在.button的样式使用这些变量:
.button {
background: rgba(255, 0, 0, $px-number * 3 / 100);
padding: $px-unit / 2;
border-radius: $px-string * 3; // throws error
margin-top: $px-number * 2px;
}
上面的代码,background等同于rgba(255, 0, 0, .54),padding等于9px。但是border-radius将会报错,因为它不能用一个字符串和一个数字做运算。
- Strings
在CSS中字符串常常用于字体样式或其他的属性的样式。Sass中的字符串和CSS一样,在Sass中,使用单引号('')或双引号("")包裹的都是字符串,就是他们包裹的是一个空格,那也是字符串。不过需要特别注意的是,如果没有使用''或""在Sass中不会被认为是字符串,在实际使用中将会造成一定的错误。比如下面的示例:
$website: 'SitePoint'; // Stores SitePoint
$name: 'Gajendar' + ' Singh';
// 'Gajendar Singh'
$date: 'Month/Year : ' + 3/2016;
// 'Month/Year : 3/2016'
$date: 'Month/Year : ' + (3/2016);
// 'Month/Year : 0.00149'
// This is because 3/2016 is evaluated first.
$variable: 3/2016; // Evaluated to 0.00149
$just-string: '3/2016'; // '3/2016'
像$name存储了一个字符串,有趣的是,在第二次声明中,3/2016并没有计算,而是当作一个字符串。这也就是说,字符串也可以和其他数据类型连接在一起。但是,字符串依旧不能和null连接。
在第三次声明中,variable直接计算了3/2016,而不是字符串,主要是因为没有别的字符串和他连接在一起。如果你希望让变量variable存储类似3/2016作为字符串,就必须像后面声明的变量$just-string一样,需要用引号(单引号或双引号)括起来。
接着我们讨论的话题继续往下说,如果你想在一个字符串是使用一个变量,而你又不想让这个变量直接变成了字符串,那就得使用到一个被称为变量插值,简单点说,就是使用#{}来包裹这个变量。来看一个简单的示例:
$name: 'Gajendar';
$author: 'Author : $name'; // 'Author : $name'
$author: 'Author : #{$name}';
// 'Author : Gajendar'
插值方法在一些条件语句中使用变量的时候变得尤其的方便。比如下面这个示例:
- Colors
CSS颜色表达式也是属于颜色数据类型,比如颜色的十六进制符号、rgb、rgba、hsl、hsla和使用关键词(如pink、blue)等等。Sass主要是给你提供一些额外的功能,这样你就可以更有效的使用颜色。比如你可以在Sass中添加颜色值。
比如下面的示例:
$color: yellowgreen; // #9ACD32
color: lighten($color, 15%); // #b8dc70
color: darken($color, 15%); // #6c9023
color: saturate($color, 15%); // #a1e01f
color: desaturate($color, 15%); // #93ba45
color: (green + red); // #ff8000
如果你想让我解释Sass是如何计算颜色的。我在这里只能简单的告诉你,Sass具有分离颜色的所有通道,然后对应的颜色通道进行运算。比如在这个示例中,red颜色对应的十六进制值是#ff0000,green颜色对应的十六进制值是#008000,把他们添加到一起就是#ff8000。另外不能使用这样的方法来计算颜色的透明(α)通道的值。
有关于Sass颜色更详细的介绍可以阅读这篇文章。
下面这个案例演示了Sass颜色功能,比如lighten()和darken()等:
- Lists
如果你熟悉其他语言中的数组的话,那么理解Sass中的列表就不会有困难。列表其实就是Sass中的数组,它可以包含零个、一个或多个值,甚至是还可以包含多个子列表。在列表中创建不同的值时,你只需要使用空格或逗号分隔开就行,如下所示:
$font-list: 'Raleway','Dosis','Lato';
// Three comma separated elements
$pad-list: 10px 8px 12px;
// Three space separated elements
$multi-list: 'Roboto',15px 1.3em;
// This multi-list has two lists.
上面的代码阐述的已很清楚,你可以在列表中存储多种类型的值。前两个列表各有三个元素,而后面的multi−list列表中两个元素用逗号分隔开,这意味着,第一个元素是字符串Roboto,而第二个元素是另一个列表(multi-list的子列表),并且这个子列表包含两个元素,这两个元素是使用空格符分隔开的。也就是说,使用不同的分隔符在同一个列表中可以创建一个嵌套列表。
当列表和循环一起使用的时候,可以证明列表是非常有用的,比如下面的示例:
上面的示例,我使用了nth(list,n)函数演示了如何得到列表中的第几个列表项。其实列表具有的功能特性远不止这些,如果你想了解有关于更多的特性,可以阅读这篇文章。
Maps Sass中的Map其实就是类似于关联数组,常常以key/value对键值出现。Map必须用括号(())括起来,每对键值之间使用逗号分隔。在Map中,一个给定的key只能有一个相关的value,但一个给定的value可以被映射到许多不同的key上。另外,在Map中映射给key的值value可以是任何数据类型,包括Map。如下面的示例所示:
$styling: (
'font-family': 'Lato',
'font-size': 1.5em,
'color': tomato,
'background': black
);
h1 {
color: map-get($styling, 'color');
background: map-get($styling, 'background');
}
上面的示例创建了一个名为$styling的map,这个Map中对应的键值是用来定义不同的CSS属性。
Sass中的Map有很多不同的函数功能,可以使用它们可以操作Map或提取值。比如这里使用的map-get函数,它接受两个参数,第一个是Map的名称$styling,第二个是你想需要取的值的key值。
在Sass中也可以对Map中的key/value做遍历
10.interpolation#{}
$version: '0.0.1';
/* 当前版本号:#{$version} */
$name: 'info';
$attr: 'border';
.alert-#{$name} {
#{$attr}-color: #ccc;
}
11.控制指令
- @if
$use-prefixes: true;
$theme: 'dark';
body {
@if $theme == dark {
background-color: #000;
} @else if $theme == light {
background-color: #fff;
} @else {
background-color: gray;
}
}
.rounded {
@if $use-prefixes {
-webkit-box-sizing: border-box;
}
box-sizing: border-box;
}
- @for
// 包含end value
@for $var from <start value> through <end value> {}
// 不包含end value
@for $var from <start value> to <end value> {}
// example
$columns: 4;
@for $i from 1 through $columns {
.col-#{$i} {
width: 100% / $columns * $i;
}
}
- @each
@each $var in $list {}
// example
$icons: success error warning;
@each $icon in $icons {
.icon-#{$icon} {
background-image: url(../imgs/icons/#{$icon}.png);
}
}
- while
@while 条件{}
// example
$i: 6;
@while $i > 0 {
.item-#{$i} {
width: 5px * $i;
}
$i: $i - 2;
}
12.用户自定义函数function
@function 名称( 参数1, 参数2) {}
// example
$colors: (light: #fff, dark: #000);
@function color($key) {
@return map-get($colors, $key)
}
body {
background-color: color(light);
}
13.警告与错误
$colors: (light: #fff, dark: #000);
@function color($key) {
@if not map-has-key($colors, $key) {
@warn "$colors 里面没有找到 #{$key}";
}
@return map-get($colors, $key)
}
body {
background-color: color(gray);
}
// 在console中提示:WARNING: $colors 里面没有找到 gray
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用?
- 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了?
- 找不到素材资源介绍文章里的示例图片?
- 模板不会安装或需要功能定制以及二次开发?
发表评论
还没有评论,快来抢沙发吧!