前端利器SASS之入门篇

前端开发过程中,我们会给各个元素指定样式,甚至有很多重复的样式,在后期维护过程中,如果我们要改动一些页面样式,可能得一个个css文件去修改,这样非常麻烦。好在有SASS这样一个神器来帮我们完成CSS的拓展和管理。那么什么是SASS?

Sass(Syntactically Awesome StyleSheets,非常棒的语法结构化层叠样式表,我瞎翻译的) 是一款强化 CSS 的辅助工具,它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能,这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库(如 Compass)有助于更好地组织管理样式文件,以及更高效地开发项目。

想要真正掌握SASS语法,就得一条一条学啊。

SASS对CSS的拓展

支持嵌套

#main {
  #home {
    background: red;
  }
}

支持父选择器&

a {
  font-weight: normal;
  &:hover { font-weight: bold; }
}

支持属性嵌套

.home {
  font: {
    family: fantasy;
    size: 30px;
    weight: normal;
  }
}
// 上述代码相当于css的如下代码
.home {
  font-family: fantasy;
  font-size: 30px;
  font-weight: normal; 
 }

SassScript

Sass支持一些类似js的语法,为我们提供了很多强大的功能。

变量

(1)声明变量

$nav-bgc: rgba(0, 0, 0, .2);

(2)引用变量

background: $nav-bgc;

(3)!default
可以在变量的结尾添加 !default 给一个未通过 !default 声明赋值的变量赋值,此时,如果变量已经被赋值,不会再被重新赋值,但是如果变量还没有被赋值,则会被赋予新的值。

$content: "First content";
$content: "Second content?" !default;
$new_content: "First time reference" !default;

#main {
  content: $content; // "First content"
  new-content: $new_content; // "First time reference"
}

ps:变量是 null 空值时将视为未被 !default 赋值。如果第一个$content的值是null,那么将会取$content: “Second content?” !default的值。

数据类型

SASS支持的数据类型主要有以下几种:

  • 数字,1, 2, 13, 10px
  • 字符串,有引号字符串与无引号字符串,“foo”, ‘bar’, baz
  • 颜色,blue, #04a3f9, rgba(255,0,0,0.5)
  • 布尔型,true, false
  • 空值,null
  • 数组 (list),用空格或逗号作分隔符,1.5em 1em 0 2em, Helvetica, Arial, sans-serif
  • maps, 相当于 JavaScript 的 object,(key1: value1, key2: value2)

支持运算符

运算规则与js类似,但有一些特别的地方,具体请参考SASS教程

插值语法#{}

通过 #{} 插值语句可以在选择器或属性名或属性值中使用变量。
使用 #{} 可以避免 Sass 运行运算表达式,直接编译 CSS。比如下面用到的font写法。

$name: foo;
$attr: border;
$font-size: 12px;
$line-height: 30px;
p.#{$name} {
  #{$attr}-color: blue;
  font: #{$font-size}/#{$line-height};
}

@extend

@extend可以实现继承,适用于一个元素使用的样式与另一个元素完全相同,但又添加了额外的样式。在不使用@extend时,我们完全可以定义两个class来实现,如:

// css部分
.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  border-width: 3px;
}
// html部分
<div class="error seriousError"></div>

但是使用@extend能为我们带来更多的好处,简洁易维护。

.seriousError {
  border-width: 3px;
  @extend .error;
}
<div class="seriousError"></div>

控制指令

(1)@if
当 @if 的表达式返回值不是 false 或者 null 时,条件成立,输出 {} 内的代码

p {
  @if true { border: 1px solid; }
}

@if后面可以接@else if和@else语句
(2)@for
这个指令包含两种格式:

@for $var from <start> through <end>
@for $var from <start> to <end>

区别在于 through 与 to 的含义:当使用 through 时,条件范围包含 <start> 与 <end>的值,而使用 to 时条件范围只包含 <start> 的值不包含 <end> 的值。
(3)@each

// @each 遍历值数组中的每一项,然后输出结果
$var in <list> {}
// @each 可遍历多维数组,如下所示
// $animal接收来自(puma, black, default)的数据,$color接收来自(red, blue, green)的数据,依次类推。
@each $animal, $color, $cursor in (puma, black, default),
                                  (red, blue, green),
                                  (pointer, default, move) {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
    border: 2px solid $color;
    cursor: $cursor;
  }
}
// @each 除了可以遍历数组,还可以遍历maps,如下所示
@each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) {
  #{$header} {
    font-size: $size;
  }
}

(3)@while
与js的while循环类似

$i: 6;
@while $i > 0 {
  .item-#{$i} { width: 2em * $i; }
  $i: $i - 2;
}

@mixin混合器

@mixin是sass中一个非常重要的概念,用于定义可重复使用的样式。

@mixin的定义

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

@mixin的使用

// 使用 @include 指令引用混合样式
.page-title {
  @include large-text;
  padding: 4px;
  margin-top: 10px;
}

ps:@mixin中也可以@include其他混合器。

带参数的混合器

@mixin sexy-border($color, $width) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}
p { @include sexy-border(blue, 1in); }
// 可以设置默认参数,如:
@mixin sexy-border($color, $width: 2px) {
// 有时候我们不知道会传入几个参数,比如不知道要设置几个box-shadow,所以可以这样使用。
@mixin box-shadow($shadows...) {
  -moz-box-shadow: $shadows;
  -webkit-box-shadow: $shadows;
  box-shadow: $shadows;
}
.shadows {
  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}

允许向@mixin中插入内容

在引用混合样式的时候,可以先将一段代码导入到混合指令中,然后再输出混合样式,额外导入的部分将出现在 @content 标志的地方:

@mixin apply-to-ie6-only {
  * html {
    @content;
  }
}
@include apply-to-ie6-only {
  #logo {
    background-image: url(/logo.gif);
  }
}
// 上述代码会编译成:
* html #logo {
  background-image: url(/logo.gif);
}

函数@function

SASS拥有一些内置函数,也支持自定义函数。

$parent-width: 40px;
$self-width: 10px;

@function get-left($n) {
  @return (parent-width - self-width) / 2;
}

#somediv { left: get-left(5); }

ps:函数的语法类似于mixin,但是函数返回的是一个值,而不是一段css。

发布了98 篇原创文章 · 获赞 41 · 访问量 20万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 技术黑板 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览