您的位置:首页 » 分类: html+css & 前端工具 & html5+css3 » 文章: Sass入门教程

Sass入门教程

小编推荐:掘金是一个高质量的技术社区,从 ECMAScript 6 到 Vue.js,性能优化到开源类库,让你不错过前端开发的每一个技术干货。各大应用市场搜索「掘金」即可下载APP,技术干货尽在掌握..

Sass(Syntactically Awesome StyleSheets) 是对 CSS 的扩展,可以编译成传统CSS,供浏览器使用。使用 Sass 是为了解决在大型项目中传统CSS会遇到的重复、可维护性差等问题。Sass 新增了nested rules(嵌套规则), variables(变量), mixins(混入), selector inheritance(选择器继承)等特性。

使用 Sass 优点:

  • 简单简洁
  • 语义化(expressive)
  • 重复使用性好(reusable)
  • 可维护性和扩展性好

Sass 的语法分为:

课程内容大纲 | 开篇:一线大公司对中高级前端工程师的要求

  • 1 JavaScript 测试基础
  • 2 JavaScript 难点选讲
  • 3 异步流程控制
  • 4 模块化
  • 5 模板引擎
  • 6 webpack
  • 7 学会性能测试对比
  • 8 基于缓存的前端性能优化
  • ......
点击报名
  • 新的SCSS  ( Sassy CSSSass 3,扩展名为*.scss);
  • 旧的SASS  ( 学习Haml,具备不使用大括弧格式、使用缩排,不能直接使用CSS语法、学习曲线较高等特性,扩展名为*.sass)

关于两者比较的补充可以参考这篇文章 What’s the difference between SCSS and Sass?

由于新的 SCSS 语法是 CSS3 的超集合,所以传统的 CSS3 档案就算直接复制过来也不会出错,学习曲线相对较缓,因此对于前端开发工程师来说推荐使用SCSS语法。

为了方便演示,你可以将示例代码直接在线转译:http://www.sassmeister.com/

本教程仅供入门学习,如果你想完整学习Sass,或者你的团队,你的项目中正在Sass,建议你查看完整的Sass文档:http://www.css88.com/doc/sass/

使用Sass

在开始介绍Sass特性之前,我们先来学习如何将 Sass 转译成 CSS 。

首先,按官网说明 安装Sass,接下来在一个文件中创建一个main.scss文件,内容如下:

// 引用
@import url(https://fonts.googleapis.com/css?family=Pacifico);
//Add variables here:

h1 {
  font-family: Roboto, sans-serif;
  text-align: center;
}

.banner {
  font-family: 'Pacifico', cursive;
  height: 400px;
  background-image: url("lemonade.jpg");
}

.container {
  text-align: center;
  font-family: 'Pacifico', cursive;
}

在命令行工具下执行以下命令进行转译:

// sass 指令 将要转译的文件名 输出的文件名
sass main.scss main.css

此时你就会看到文件夹中多了 main.cssmain.css.map 两个文件。

更多Sass使用说明请查看:http://www.css88.com/doc/sass/#using-sass

Variables(变量)

变量可以用来储存值,可以增加重用性。在 Sass 中我们使用`$`来表示变量,变量类型可以是 Numbers(可以有单位或无单位)、Strings、Booleans、null值(视为空值),甚至可以使用 Lists、Maps。变量的使用:

$translucent-white: rgba(255,255,255,0.3);
p {
    background-color: $translucent-white;
}

Lists 类型的值可以用空格或加逗号分隔,Maps代表一个键和值对集合,键用于查找值。和 Lists 不同,Maps必须始终使用括号括起来,并且必须用逗号分隔。:

$font-style-2: Helvetica, Arial, sans-serif;
$standard-border: 4px solid black;

p {
    border: $standard-border;
}

// maps key:value
$font-style-2: (key1: value1, key2: value2);

Nesting(嵌套)

Sass 允许将一个 CSS 样式嵌套进另一个样式中,内层样式仅适用于外层样式的选择器范围内,可以理解为层级选择器,有助于降低父元素重复性。转译前:

.parent {
  color: blue;
  .child {
    font-size: 12px;
  }
}

转译后:

.parent {
  color: blue;
}

.parent .child {
    font-size: 12px;
}

有些时候需要直接使用嵌套外层的父选择器,这个时候需要使用&(了解引用父选择器:&)。例如:

a {
  font-weight: bold;
  text-decoration: none;
  &:hover { text-decoration: underline; }
  body.firefox & { font-weight: normal; }
}

转译后:

a {
  font-weight: bold;
  text-decoration: none; }
  a:hover {
    text-decoration: underline; }
  body.firefox a {
    font-weight: normal; }

嵌套不仅只用于子选择器上,还可以使用在同一个命名空间中的属性上,例如:

.funky {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}

转译后:

.funky {
  font-family: fantasy;
  font-size: 30em;
  font-weight: bold; 
}

Mixins(混入)

混入(mixin)允许您定义可以在整个样式表中重复使用的样式,从而避免了使用无语意的类(class),比如 .float-left。混入(mixin)还可以包含所有的CSS规则,以及任何其他在Sass文档中被允许使用的东西。他们甚至可以带参数,引入变量,只需少量的混入(mixin)代码就能输出多样化的样式。

定义的混入@mixin 使用 @include 引用。

简单的例子:

//定义一个mixin
@mixin large-text {
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: #ff0000;
}

//引用mixin
.page-title {
  @include large-text;
  padding: 4px;
  margin-top: 10px;
}

转译后:

.page-title {
  font-family: Arial;
  font-size: 20px;
  font-weight: bold;
  color: #ff0000;
  padding: 4px;
  margin-top: 10px; 
}

再来举一个最常见的例子,比如给属性加上跨浏览器的前缀,这里我们使用了一个参数$radius。例如:

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.box { @include border-radius(10px); }

转译后:

.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}

参数还可以使用默认值,对上面的例子稍作修改:

@mixin border-radius($radius:10px) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}
.box1 { @include border-radius(); }
.box2 { @include border-radius(20px); }

转译后:

.box1 {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}

.box2 {
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -ms-border-radius: 20px;
  border-radius: 20px;
}

有时我们也需要处理参数复杂的情形,此时可以使用 Lists、Maps 类型来辅助,例如:

// 定义一个混入,用于定义线性渐变
@mixin stripes($direction, $width-percent, $stripe-color, $stripe-background: #FFF) {
  background: repeating-linear-gradient(
    $direction,
    $stripe-background,
    $stripe-background ($width-percent - 1),
    $stripe-color 1%,
    $stripe-background $width-percent
  );
}
// 定义一个map,作为混入参数
$college-ruled-style: ( 
  direction: to bottom,
  width-percent: 15%,
  stripe-color: blue,
  stripe-background: white
);
// 通过map类型作为参数,引用混入。
.definition {
  width: 100%;
  height: 100%;
  @include stripes( $college-ruled-style ... );
 }

这里有需要注意一个地方,这里的参数是一个可变参数,参数后面需要跟...进行传递(什么是可变参数)。转译后:

.definition {
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(to bottom, white, white 14%, blue 1%, white 15%);
}

还有种情况是参数当作字串传入(或者字符串插值),说的通俗一点就是带引号的字符串将被编译为不带引号的字符串,需要使用#{}插值,例如:

// 使用 #{$file} 接收
@mixin photo-content($file) {
  content: url(#{$file}.jpg); //string interpolation
  object-fit: cover;
}

.photo { 
  @include photo-content('titanosaur');
  width: 60%;
  margin: 0px auto; 
}

转译后:

.photo {
  content: url(titanosaur.jpg);
  object-fit: cover;
  width: 60%;
  margin: 0px auto;
}

混入中也可以使用嵌套:

@mixin hover-color($color) {
  &:hover {
    color: $color;
  }
}

.word {
  @include hover-color(red);
}

转译后:

.word:hover {
  color: red;
}

Functions(函数)

Sass内置了一些好用函数可以简单设定色相、渐变等,例如:adjust-hue($color, $degrees)fade-out

更多内置函数的列表请查看这个页面

Operations(运算)

通过加减乘除和取余等运算符可以方便运算所需的属性值。Sass 支持数字标准的算术运算(加法+,减法- ,乘法*,除法/和取模%)。Sass 数学函数在算术运算期间会保留单位。数字类型支持关系运算符(<, >, <=, >=),并且所有类型支持相等运算符(==, !=)。

比如颜色运算:

p {
  color: #010203 + #040506;
}

计算 01 + 04 = 05, 02 + 05 = 07, 和 03 + 06 = 09,并且转译为:

p {
  color: #050709; }

除法 / 使用上需要注意:

p {
  font: 10px/8px;             // 原生的CSS,不作为除法
  $width: 1000px;
      width: $width/2;            // 使用了变量, 作为除法
  width: round(1.5)/2;        // 使用了函数, 作为除法
  height: (500px/2);          // 使用了括号, 作为除法
  margin-left: 5px + 8px/2px; // 使用了 +, 作为除法
  font: (italic bold 10px/8px); // 在一个列表(list)中,括号可以被忽略。
}

转译为:

p {
  font: 10px/8px;
  width: 500px;
  height: 250px;
  margin-left: 9px; }

也可以使用@each语法迭代list内容:

$list: (orange, purple, teal);

@each $item in $list {
  .#{$item} {
    background: $item;
  }
}

这里再次提醒一下,参数当作字串传入时需要使用#{}插值。编译后:

.orange {
  background: orange;
}

.purple {
  background: purple;
}

.teal {
  background: teal;
}

使用@for迭代,并加入条件判断:

$total:3;
$step :2;
@for $i from 1 through $total {
  .ray:nth-child(#{$i}) {
    background: adjust-hue(blue, $i * $step);
    // if()函数
    width: if($i % 2 == 0, 300px, 350px);
    margin-left: if($i % 2 == 0, 0px, 50px);
  }
}

编译后:

.ray:nth-child(1) {
  background: #0900ff;
  width: 350px;
  margin-left: 50px;
}

.ray:nth-child(2) {
  background: #1100ff;
  width: 300px;
  margin-left: 0px;
}

.ray:nth-child(3) {
  background: #1a00ff;
  width: 350px;
  margin-left: 50px;
}

这里还有一个就是if()函数,第1个参数是判断条件,第2个参数是判断条件为true时返回的值,第3个参数是判断条件为false时返回的值。

@import 引用

可以引入其他 Sass、SCSS 文件。我们通常使用Partials去处理特定功能,方便管理和维护。以下是引用_variables.scss文件的范例,其中文件名前的_表示引用前要先编译:

@import "variables";

@extend(扩展)

当一个样式类(class)含有另一个类的所有样式,并且它有自己的特定样式的时候可以使用 @extend 。例如,编译前:

.lemonade {
  border: 1px yellow;
  background-color: #fdd;
}
.strawberry {
  @extend .lemonade;
  border-color: pink;
}

转译后:

.lemonade, .strawberry {
  border: 1px yellow;
  background-color: #fdd;
}

.strawberry {
  border-color: pink;
}

搭配占位符(Placeholders) 使用,转译前:

$lemon-yellow : red;
a%drink {
  font-size: 2em;
  background-color: $lemon-yellow;
}

.lemonade {
  @extend %drink;
  font-size: 1.5em;
}

转译后:

a.lemonade {
  font-size: 2em;
  background-color: red;
}

.lemonade {
  font-size: 1.5em;
}

@mixin@extend比较,转译前:

@mixin no-variable {
  font-size: 12px;
  color: #FFF;
  opacity: .9;
}

%placeholder {
  font-size: 12px;
  color: #FFF;
  opacity: .9;
}

span {
  @extend %placeholder;
}

div {
  @extend %placeholder;
}

p {
  @include no-variable;
}

h1 {
  @include no-variable;
}

转译后:

span, div {
  font-size: 12px;
  color: #FFF;
  opacity: .9;
}

p {
  font-size: 12px;
  color: #FFF;
  opacity: .9;
}

h1 {
  font-size: 12px;
  color: #FFF;
  opacity: .9;
}

总结

以上就是 Sass/SCSS 最简单最基础也是最常用的入门教程,在这篇文章中我们大致上介绍了 Sass 使用语法。除了 Sass 外,目前还有许多 CSS 扩展,包括语法较易学的LESS、组件化化思考的 CSS in JS、主要解决全域问题和模块引用的CSS Modules,取经于JavaScript Task Runner的PostCSS、网格样式表单GSS等等,这些最终目的都是为了解决传统CSS维护不易、重用性低等问题。事实上,有些人觉得使用 CSS 预处理器比较容易维护,有些人认为每次都要编译很麻烦,至于要选择哪一种 CSS 预处理器 或是根本不使用,取决于团队的内部规范和讨论。俗话说后端一天,前端一年,说不定现在选边站的技术,下个月就不流行了呢。

正文完。下面还有一个推广让最好的人才遇见更好的机会!

互联网行业的年轻人,他们面对着怎样的职业瓶颈、困惑与未来选择?过去,这鲜有人关心。资深的职场人,也多半优先选择熟人去推荐机会。

100offer致力于改变现状,帮互联网行业最好的人才发现更好的机会。使用 100offer.com 或 100offer App ,可以一周内获得中国、美国等数千家优质企业的工作机会。

马上去遇见更好的机会
推广结束

1 条评论 - 关于 “Sass入门教程

发表评论

电子邮件地址不会被公开。 必填项已用*标注