[ Laravel 从入门到精通 ] 前端入门:CSS 预编译语言 Sass 快速入门教程

CSS 预编译语言概述

CSS 作为一门样式语言,语法简单,易于上手,但是由于不具备常规编程语言提供的变量、函数、继承等机制,因此很容易写出大量没有逻辑、难以复用和扩展的代码,在日常开发使用中,如果没有完善的编码规范,编写的 CSS 代码会非常冗余且难以维护。

为了解决上述问题,出现了很多 CSS 预编译语言,CSS 预编译语言是基于 CSS 语言的语法扩展,除了能解决上述缺乏语言特性带来的问题之外,还支持嵌套书写,减少重复输入父级选择器(可理解为 CSS 中的继承机制),提高了代码的可读性和编写效率,常见的预编译语言有 LessSass 等。

Sass 与 Less 等其它预编译语言不存在优劣之分,一般来说,Sass 的功能更加强大或者说 Sass 的语言层面更接近于一门完整的编程语言,而 Less 则更接近于 CSS 语法,所以我们在 Vue 中通常会使用 Sass 编写样式代码(参考我们在 API 项目教程中的配置 JavaScript 和 Sass 这篇教程),Laravel 默认提供的样式代码也是 scss 结尾的,也是使用的 Sass 语言。所以我们来了解下 Sass 的安装和使用,非常简单,即学即用。

Sass 简介和安装

Sass 是对 CSS 的扩展,让 CSS 语言更强大、优雅。它允许你使用变量、嵌套规则、混合、导入等众多功能,并且完全兼容 CSS 语法。

Sass 具有两种不同的后缀名分别对应两套语法,最早 Sass 使用的是缩进式语法,使用缩进来区分代码块,并通过分号将具体样式分开,这种语法以 .sass 作为后缀;另一种使用了和 CSS 一样的块语法,这种语法以 .scss 作为后缀。后者更加兼容原生 CSS 语法,所以我们通常使用后者,接下来的教程我们也使用这种语法。

编写好 Sass 文件后,需要将其编译为 CSS 文件才能在项目中使用,为此我们需要安装相应的编译工具,Sass 官方解释器通过 Ruby 编写,同时也有其他语言实现的版本,最常见的就是 C 语言实现的 libSass,NPM 扩展包 node-sass 就封装了对 libSass 的实现,所以我们可以通过安装这个前端扩展包来编译 Sass 文件,不过在 Laravel 项目中,开箱提供了 Laravel Mix 进行前端资源的编译,当我们通过 npm install 安装 laravel-mix 的过程中,系统会自动安装 laravel-mix 声明的依赖,其中就包括了编译 Sass 所需要的 node-sass,我们无需再额外安装这个扩展包,这些事情 Laravel Mix 在底层默默帮我们完成了。

Sass 使用语法

Sass 提供了变量、嵌套、混合、导入、循环等功能,不过作为有其他编程语言功底的我们来说,学习起来非常简单,花个一个小时就熟悉了,下面我们逐一来介绍这些功能。

变量

和 PHP 一样,Sass 的变量通过 $ 作为标识符,Sass 支持的数据结构包括数字、字符串、数组、颜色、布尔值、null、List、Map、函数引用(如果你不了解 Python 或 Java 这类编程语言,也不熟悉 Redis 中的数据结构,可以将 List 理解为 PHP 中未指定键名的索引数组,将 Map 理解为以字符串作为键名的关联数组):

// 简单变量
$primary-color: #333;

// 引用变量
body {
    color: $primary-color;
}

// List
$font-stack: ('Helvetica', 'Arial', sans-serif);

body {
    font: 100% nth($font-stack, 1);  // 获取 List 的值,索引从1开始,不是0!
}

// Map
$breakpoints: (
    small: 767px,
    medium: 992px,
    large: 1200px
);

// 变量作为插入变量需要通过 #{} 引入,通过 map_get 函数从 Map 中获取值
@media (min-width: #{map-get($breakpoints, small)}) {

}

$name: foo;
$attr: border;
p.#{$name} { #{$attr}-color: #44b336; }

有两个需要注意的地方,和一般编程语言数组或列表索引从 0 开始不同,Sass 中的 List 索引从 1 开始;另外,变量作为插入变量,即作为选择器或属性名的时候需要用 #{} 引入,PHP也有类似概念,只不过是通过 {} 引入的。

嵌套

Sass 的嵌套语法也很实用,在此之前,我们只能通过多个 CSS 样式定义来解决嵌套问题:

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

相信我不用过多解释,你也能理解这段代码的含义,以及在样式代码编写过程中,带来的效率提升。

混合(Mixin)

有的时候,我们可能有一段 CSS 样式代码需要在多个地方使用,这可以通过 Sass 提供的混合(Mixin)功能来实现,定义混合代码的时候需要在选择器前面加上 @mixin 标识,引用混合代码的时候需要通过 @include 来引入:

// 清除浮动
@mixin clearfix {
    zoom: 1;
    &:before,
    &:after { content: ""; display: table; }
    &:after {
        clear: both;
        visibility: hidden;
        font-size: 0;
        height: 0;
    }
}

div { @include clearfix; }   // 使用 mixin

函数

函数和混合有点类似,不过函数更加强大,可以传入参数并实现运算功能,函数通过 @function 标识声明,函数名允许出现短划线 -,函数体内可以使用在函数声明之前定义的所有变量,同时计算时会带上变量声明时的单位:

$grid-width: 40px;
$gutter-width: 10px;
@function grid-width($n) {
    @return $n * $grid-width + ($n - 1) * $gutter-width;
}

使用函数时直接调用函数即可:

#sidebar { width: grid-width(5); }

控制结构

与 Blade 模板类似,Sass 为控制结构提供了各种指令,如 @if@else@for@each@while 等:

$type:sass;
// 条件判断,根据不同条件定义不同的样式
p {
    @if $type == less {
        color: green;
    } @else if $type == sass {
        color: red;
    } @else {
        color: black;
    }
}

// 循环,定义多个样式
@for $i from 1 through 3 {
    .item-#{$i} { width: 2em * $i; }
}

// 遍历,类似 foreach,也是定义多个样式,用于遍历 Map 结构
@each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) {
    #{$header} {
        font-size: $size
    }
}

需要注意的是 @for $i from start through end 还可以改写成 @for $i from start to end,不同之处在于前者包括 end,后者不包括,另外如果要实现逆序的话,可以将 startend 的值倒过来。

导入

Sass 支持通过 @import 指令导入其它 Sass 文件,既可以导入本地开发文件,也可以导入前端依赖库中的文件,还可以导入网络字体文件,以 Laravel 自带的 resources/sass/app.scss 为例:

// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');

// Variables
@import 'variables';

// Bootstrap
@import '~bootstrap/scss/bootstrap';

在导入 Sass 文件的时候,可以省略文件后缀。

继承

Sass 还支持样式继承,我们通过 % 前缀指定用于继承的样式,然后在需要继承的地方提供 @extend 指令继承相应的父类样式:

// 以%开头的父类不会渲染
%message-shared {
    border: 1px solid #ccc;
    padding: 10px;
    color: #333;
}

.message {
    @extend %message-shared;
}

.success {
    @extend %message-shared;
    border-color: green;
}

.error {
    @extend %message-shared;
    border-color: red;
}

.warning {
    @extend %message-shared;
    border-color: yellow;
}

操作符

和其他常规编程语言一样,Sass 支持对变量进行+-*/%操作。

结语

好了,通过以上语法的介绍相信你已经具备了编写 Sass 样式文件的能力,在基于 Laravel + Vue.js 驱动的项目中,我们通常会在两个地方编写样式代码,一个是 resources/sass
目录下独立的 .scss 文件,另一个是 Vue 组件中的 <style lang="scss"></style> 中,我们在属性中设置 lang="scss" 表示这里面是 Sass 代码,需要 Laravel Mix 编译的时候将其编译到指定的 CSS 文件中。

声明:本教程只是 Sass 快速入门教程,不代表 Sass 的全部功能特性,更多语法请参考官方文档

学院君 has written 1314 articles

Laravel学院院长,终身学习者

积分:186007 等级:P12 职业:手艺人 城市:杭州

2 条回复

登录后才能进行评论,立即登录?