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,后者不包括,另外如果要实现逆序的话,可以将 start 和 end 的值倒过来。

导入

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 的全部功能特性,更多语法请参考官方文档

laravel 中CSS 预编译语言 Sass 快速入门教程的更多相关文章

  1. css预编译语言 sass scss(变量$var, css嵌套规则,@import规则,@extend,@mixin)

    什么是sass Sass 是对 CSS 的扩展,让 CSS 语言更强大.优雅. 它允许你使用变量.嵌套规则. mixins.导入等众多功能, 并且完全兼容 CSS 语法. Sass 有助于保持大型样式 ...

  2. css预编译语言sass——mixin的使用

    以根据不同屏幕吃寸动态应用背景图片为例 新建一个mixin如下: @mixin bg_img($path, $ext){ @media screen and (max-device-width: 76 ...

  3. css预处理器sass学习

    SASS 叫做css预处理器,他的基本思想是用一门专门的编程语言来进行页面样式的设计,然后在编译成正常的css文件. Sass的用法 安装 sass是用ruby语言写的,所以我们在安装sass之前要先 ...

  4. wepack+sass+vue 入门教程(三)

    十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...

  5. wepack+sass+vue 入门教程(二)

    六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...

  6. 专为设计师而写的GitHub快速入门教程

    专为设计师而写的GitHub快速入门教程 来源: 伯乐在线 作者:Kevin Li     原文出处: Kevin Li 在互联网行业工作的想必都多多少少听说过GitHub的大名,除了是最大的开源项目 ...

  7. CMake快速入门教程-实战

    http://www.ibm.com/developerworks/cn/linux/l-cn-cmake/ http://blog.csdn.net/dbzhang800/article/detai ...

  8. webpack+sass+vue 入门教程(三)

    十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...

  9. webpack+sass+vue 入门教程(二)

    六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...

随机推荐

  1. Python 包

    转载自https://www.cnblogs.com/feeland/p/4401758.html Python 包 包 定义 为了组织好模块,会将多个模块分为包.Python 处理包也是相当方便的. ...

  2. 【页面加载】【九九乘法表】【document.write的功能_】【<script>直接显示数组】【声明新变量】

    1.页面加载时向body加载文本.弹出框 <body>        <script>            document.write("<h1>Ja ...

  3. Coconuts HDU - 5925 (二维离散化求连通块的个数以及大小)

    题目链接: D - Coconuts  HDU - 5925 题目大意:首先是T组测试样例,然后给你n*m的矩阵,原先矩阵里面都是白色的点,然后再输入k个黑色的点.这k个黑色的点可能会使得原先白色的点 ...

  4. Hibernate_day04

    Hibernate_day04 上节内容 1 表与表之间关系回顾 (1)一对多(客户和联系人) (2)多对多(用户和角色) 2 hibernate一对多操作 (1)一对多映射配置 (2)一对多级联保存 ...

  5. Fragment回退栈&commit()和commitAllowingStateLoss()

    Activity切换时是通过栈的形式,不断压栈出栈,在Fragment的时候,如果你不是手动开启回退栈,它是直接销毁再重建,但如果将Fragment任务添加到回退栈,情况就会不一样了,它就有了类似Ac ...

  6. nginx 端口映射多个应用

    nginx端口映射多个应用,应用中的静态资源路径尽量是写相对路径 server { listen 8000; location / { proxy_pass http://10.1.166.216:9 ...

  7. Vue对变量的监控

    Vue对变量的监控 watch: { a(val, oldVal) {//普通的watch监听 if (val == "1") { $('#myModal').modal(); } ...

  8. 【Linux】虚拟服务器之LVS

    写在前面 觉得甚是幸运,能够有机会参与到ITOO配置环境的工作中去.现在正在熟悉,在搭建环境的时候,有LVS安装配置教程,对这一块有些懵逼,这几天查了一些资料,写在这里,和大家分享一下 是什么 LVS ...

  9. jquery iCheck的全选和获取value

    jQuery iCheck 插件提供高度可定制的复选框和单选按钮(jQuery和Zepto).最新版本1.0.2,有个最新的2.0预览版,但是发布之后没有再更新. 特点:在不同的浏览器和设备(桌面和移 ...

  10. svn更新出现冲突的解决方法

    Conflict discovered in '/Users/apple/EtaxiAppServer/common/src/com/yaotaxi/db/MongoDBHelper.java'. S ...