Sass

omgEn
368 阅读3分钟

Sass简介

  • Sass是什么
    • Sass是一个CSS预处理器，即首先编写Sass代码，然后经过处理变成浏览器能理解的CSS。
    • 我们只需要编写.scss文件，Sass的预处理器会自动把Sass文件转换成.css文件。
  • 使用Sass的好处
    • Sass做预处理操作，会自动把多个较小的文件合并成一个CSS文件，以便提升加载速度
    • 可以轻易更新公用的值（自动检测） 编写的代码量更少。从而提升效率，而且出错的几率更小

使用Sass局部文件

Sass允许把css/Sass规则分成多个文件，编译时在合并为一个css文件

为了不让Sass把局部文件转换成单独的CSS文件，局部文件的名称必须用_开头。（开头的css和sass文件不会被转成css文件）。即Sass会忽略这些文件，除非我们明确调用它们。

把_的文件放到最终要输出的Sass中。我们可以把sass局部文件记载到另一文件中，如下： @import ‘_reset.scss’ 可以简写成@import ‘reset’

Sass局部文件的组织方式

sass/
    helpers/ #特殊的Sass文件
        _variables.scss
        _mixins.scss
    base/ 	#项目的基础文件
        _reset.scss
        _grid.scss
        _typography.scss
    layout/	#装饰页面各个区域的文件
        _header.scss
        _footer.scss
        _slidebar.scss
        _forms.scss=  
    components/	#UI组件的文件
        _buttons.scss
        _dropdown.scss
        _navigation.scss
    styles.scss	#Sass主文件
把以上的文件全部引入style.scss中
@import 'helpers/variables';
@import 'helpers/mixins';
@import 'base/reset';
@import 'base/grid';
@import 'base/typography';
@import 'layout/header';
@import 'layout/footer';
@import 'layout/forms';
@import 'components/buttons';
@import 'components/dropdown';
@import 'components/navigation';
以上要按照这个顺序写

Sass变量

变量用于存储可能改变或变更的值。例如，有时徽标的主色改变，如果用变量就可以自动更新。

把变量集中放在一个地方，以便其他Sass文件都能使用，最后创建一个单独的文件夹，专门保存变量。_variables.scss。

Sass变量的常见用途：

  • 常用于存储颜色值。

    $text-color: #eee;文本颜色
$headline-color:#eee;标题颜色
$order-color:#eee;
$background-color:#Ddd;

  • 公司使用的调色板

    $primary-dark
$primary-light
$primary-mid
$secondary-dark:
$secondary-light

  • 常用于设置字体栈

    ——列出页面中不同元素(如标题和正文)使用的字体

    $headline-footer:”Varela Round”, Helvetica, Arical, sans-serif;
$body-foot: “Palatino Linotype, Baskerville, serif”;

  • 圆角

    $margin-top: 20px;
$margin-bottom: $margin-top/2;

    Sass对于单位不同不懂如何运算，例如em和px

嵌套选择符

  • 引用父辈选择符

    $表示自身

    .button {
    &:link {}
    &:visited {}
    &:hover {}
    &:active{}
}

  • 多层嵌套

    虽然Sass不限制嵌套的层级。但是我们写的时候，最限制嵌套选择符的层级，大多数情况下，使用一两层就够了。如果超过这个成熟，选择符容易乱。

    注：嵌套层级太多也说明过于依赖网页中HTML标签的嵌套方式。这样写出的CSS代码不牢靠。

  • 嵌套规范

image.png

  • 属性嵌套

image.png

  • 嵌套规则

image.png

image.png

image.png

注：嵌套功能避免了重复输入父选择器， 而且令复杂的 CSS 结构更易于管理，嵌套规则不要超过4层

  • 属性嵌套

image.png

  • 变量

image.png

继承（或拓展）属性

@extend 指令

h1 {
    font-maily: “Raleway”, Helvetica, Arial, sans-seruf;
    color: #222;
}
h2 {
    @extend h1;
    border-top: 1px solid #444;
}
h3 {
    @extend h1;
    margin-left: 20px;
}

这样子写的好处：如果想要修改h2，以后只需要找到h2就可

  • 使用占位符选择拓展

    #main h1 {
	background-color: blue;
}
h1 {
	font-family: "Raleway", Helvetica, Arial, sans-serif;
	color: #222;
}
h2 {
	@extend h1;
	border-top: 1px solid #444;
}
h3 {
	@extend h1;
	margin-left: 20px;
}
//变成
#main h1, #main h2,#main h3 {
	background-color: blue;
}
h1,h2,h3 {
	font-family: "Raleway", Helvetica, Arial, sans-serif;
	color: #222;
}
h2 {
	border-top: 1px solid #444;
}
h3 {
	margin-left: 20px;
}

    Sass生成了一个群组选择符，选取main元素里的全部h1，h2，h3。如果其他样式的选择符中也包含了h1,情况更糟，sass也会为这些选择符创建群组选择符。为了解决这个问题，Sass提供了占位选择符。这种选择符以%开头。

    #main h1 {
	background-color: blue;
}
%headline {
	font-family: "Raleway", Helvetica, Arial, sans-serif;
	color: #222;
}
h1 {
	@extend %headline;
}
h2 {
	@extend %headline;
	border-top: 1px solid #444;
}
h3 {
	@extend %headline;
	margin-left: 20px;
}
/*等价于*/
#main h1 {
	background-color: blue;
}
h1,h2,h3 {
	font-family: "Raleway", Helvetica, Arial, sans-serif;
	color: #222;
}
h2 {
	border-top: 1px solid #444;
}
h3 {
	margin-left: 20px;
}

混入

minxin。混入指代一组想重复多次使用的css属性。

创建混入

@mixin flex {
    display: -webkit-flex;
    display: flex;
}

使用混入

.container {
    @include flex;
    background-color: #84F;
    border: 1px solid #444;
}

为混入提供信息

@mixin rotate($deg){
    -webkit-transform: rotate($deg);
    -ms-transform: rotate($deg);
    transform: rotate($deg);
}
h1 {
	@include rotate(3deg);
}
div {
	@include rotate(7deg);
}

在文本中插入变量

如果想把Sass变量和文本字符串写在一起，要使用一些特殊的符合，告诉Sass那一部分是变量。这种技术叫插值（interpolation）

#{变量名}

@mixin rotate($deg){
    -webkit-transform: rotate(#{$deg}deg);
    -ms-transform: rotate(#{$deg}deg);
    transform: rotate(#{$deg}deg);
}
@invlude rotate(10);

向混入传入更多信息和可选的值

@mixin text($size, $line-height, $weight, $color) {
    font-size: $size;
    line-height: $line-height;
    font-weight: $weight;
    color: $color;
}
h1 {
	@include text(1.25em, 1.2, bold, #FF000);
}
h2 {//Sass会报错，不会把Sass文件编译成css文件
	@include text(1.25em, 1.2);
}
//但可以告诉Sass，混入的参数是可选的。如
@mixin text($size, $line-height:null, $weight:null, $color:null) {
    font-size: $size;
    line-height: $line-height;
    font-weight: $weight;
    color: $color;
}
h1 {
	@include text(2em);
}
h2 {
	@include text(1.2em, 1.2);
}

设置默认值

@mixin text($size, $line-height:1.2, $weight:normal, $color) {
    font-size: $size;
    line-height: $line-height;
    font-weight: $weight;
    color: $color;
}//如果不为参数设置值，Sass会使用默认值
h1 {
	@include text(2em);
}
//参数顺序问题
h2 {//给line-height传入red，错误
	@include text(2em, red);
}
h2 {//正确，需要把形参也给出
	@include text(2em, $color:red);
}

媒体查询

媒体查询用于创建在各种尺寸的屏幕中都具有良好的外观、能正常使用的弹性布局。

Sass原生支持在选择符中使用媒体查询。

h1 {
font-size: 2em;
    @media(min-width:1200px){
    	font-size: 3em;
	}	
}

参考Sass官网

参考《CSS实战手册 第四版》

Sass和Less区别

  • Less是客户端处理，Sass是服务端处理，前者解析比后者慢一点

继承（extend）与混合（mixin）

都是为了实现代码复用的功能

image.png

image.png

混合不是公用样式类，会直接复制一份出来；而继承只是对类添加选择器来达到公用的目的，所以混合会造成代码冗余， 而继承不会。

当都是直接引用样式类，在不涉及变量参数的情况下用继承，避免代码冗余。若需要通过参数功能引入变量，输出多样化的话，用混合

avatar
文章
阅读
粉丝