后端工程师学前端(五): SASS
此前我们学习了基本的CSS和HTML的知识,因此我们已经可以开始构建基本的页面, 但是现实工程中有一个问题,即CSS使用的越来越多,代码维护难度也上升。
因此2015-2018年左右,开始有了轰轰烈烈的前端工程化。
这一篇是阅读SASS官方指南之后的笔记
现在(2019年),基本上要用的工具都定型了,我们作为渔翁,可以直接上手开始使用。今天我们介绍一个CSS预处理器: SASS。
SASS
CSS的本质是DSL,它是一套规则,因此书写的时候就是一条条的规则,不像编程语言那样可以继承。而SASS的作用就是解决这个问题, SASS编译之后产生css。
SASS有两种语法:SCSS和SASS。SASS只是CSS的语法糖;SCSS是超集。官方推荐SCSS,不过我觉得使用SASS就够了。
首先看一下如何使用:
$ sudo pacman -S sassc # 安装sass编译器,我安装的是C语言实现版本
$ cat > hello.sass
$font-stack: Helvetica, sans-serif
$primary-color: #333
body
font: 100% $font-stack
color: $primary-color
$ sassc -t compressed hello.sass hello.min.css
$ cat hello.min.css
body{font:100% Helvetica,sans-serif;color:#333}
接下来看看SASS的语法:
支持
//
和/* */
两种注释使用美元符号来声明变量:
$font-stack: Helvetica, sans-serif
$primary-color: #333
body
font: 100% $font-stack
color: $primary-color
- 通过缩进来嵌套:
nav
ul
margin: 0
padding: 0
list-style: none
li
display: inline-block
a
display: block
padding: 6px 12px
text-decoration: none
- 通过使用下划线开头的文件名来将一个sass文件作为可导入的模块;通过使用
@import
来导入
// _reset.sass
// _reset.sass
html,
body,
ul,
ol
margin: 0
padding: 0
// base.sass
@import reset
body
font: 100% Helvetica, sans-serif
background-color: #efefef
- 通过使用
%
定义可复用组件,然后使用@extend
继承:
/* This CSS will print because %message-shared is extended. */
%message-shared
border: 1px solid #ccc
padding: 10px
color: #333
// This CSS won't print because %equal-heights is never extended.
%equal-heights
display: flex
flex-wrap: wrap
.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
- 使用
+, -, *, /, %
进行运算:
.container
width: 100%
article[role="main"]
float: left
width: 600px / 960px * 100%
aside[role="complementary"]
float: right
width: 300px / 960px * 100%
参考资料:

关注公众号,获得及时更新
更多文章
本站热门
- socks5 协议详解
- 搞定面试中的系统设计题
- zerotier简明教程
- Golang(Go语言)中实现典型的fork调用
- Docker组件介绍(一):runc和containerd
- Docker组件介绍(二):shim, docker-init和docker-proxy
- frp 源码阅读与分析(一):流程和概念
- DNSCrypt简明教程
- Go Module 简明教程
- Golang validator使用教程
- 协程(coroutine)简介 - 什么是协程?
- 使用Go语言实现一个异步任务框架
- 一个Gunicorn worker数量引发的血案
- SQLAlchemy简明教程
- Golang的template(模板引擎)简明教程