• 今天就让我们来学习什么是Sass???


    为何有 Sass

    作为前端开发人员对于 CSS 应该不陌生吧,大多数前端开发对 CSS 都是既爱又恨,爱它可以通过简单的代码使页面美化,恨他是因为随着项目的复杂性越高,它的可维护性就越差。作为开发人员,CSS 更像是一门设计类语言而非开发类语言。比如:

    • 缺少模块化机制
    • 缺少变量机制,使得滋生很多重复的代码
    • 嵌套层级写法非常痛苦
    • 复用困难

    因此,有需求就会有市场,Sass 因此应运而生。

    Sass 是世界上最成熟、最稳定、最强大的专业级 CSS 扩展语言!

    从官方的解释不难看出,Sass 是一门 CSS 的开发工具,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护。(这里还可以去了解下 CSS 预处理技术~)

    接下来就简单介绍下 Sass 的基本使用~

    变量机制

    Sass 允许是用变量,所有变量以 $ 开头。如果变量需要镶嵌在字符串之中,就必须需要写在 #{} 之中。

    $main-color: #333;
    $side: left;
    
    .div1 {
    background: $main-color;
    border-#{$side}-radius: 5px;
    }
    .div2 {
    background: $main-color;
    }

    使用变量定义的好处显而易见,一是可以把调用频繁的变量属性放置单一文件夹,方便多人协调开发,二是便于统一项目样式风格。

    嵌套写法

    没有嵌套写法应该是 CSS 最蛋疼的点了,来看看之前是怎么写 CSS 的:

    .container .content .left-side .name {
    font-size: 20px;
    }
    .container .content .left-side .age {
    font-size: 14px;
    }

    有了 Sass 之后这就变得很简单了,避免了大量重复的选择器:

    .container {
    .content {
    .left-side {
    .name {
    font-size: 20px;
    }
    .age {
    font-size: 14px;
    }
    }
    }
    }

    模块机制

    CSS 中有定义一个模块化 @import 规则,不过因为其需要执行到才会去下载所需代码,实际使用时会引起页面卡顿。Scss 对其进行了扩展,允许其导入 Scss 或 Sass 文件。被导入的文件将合并编译到同一个 CSS 文件中,另外,被导入的文件中所包含的变量或者混合指令(mixin)都可以在导入的文件中使用。

    @import "common";
    @import "popup";
    @import "module_a";

    @import 使得开发时 CSS 和 html 完全分离,通过一个文件引入 CSS 即可,修改样式也不需要修改到 html 文件,项目也不会随着业务复杂度增加而变得更加复杂,只需要增加、修改、删除对应功能模块就行。

    Mixin

    Sass 提供了一种混合指令,可以将公共样式片段抽离放在单独文件中,便于多处复用。

    在没有 Sass 前我们部分 CSS 是这样的:

    .div1 {
    background: red;
    border: 1px solid #333;
    border-radius: 2px;
    }
    .div2 {
    background: blue;
    border: 1px solid #333;
    border-radius: 2px;
    }

    如果想抽离公共样式片段只能这样做:

    .div1,
    .div2 {
    border: 1px solid #333;
    border-radius: 2px;
    }
    .div1 {...}
    .div2 {...}

    这种写法每次想重复利用该样式片段都得在其后面加上选择器,而且相同选择器有不同的样式片段,随着项目复杂度增强,其维护成本极高。(如果想再优化写法,可以将公共部分抽成一个新的类,但会增加类名复杂度)

    有了 Sass 的 @mixin 之后就简单了许多:

    @mixin grey-border-radius {
    border: 1px solid #333;
    border-radius: 2px;
    }
    .div1 {
    @include grey-border-radius;
    background: red;
    }

    不仅如此,@mixin 还可以指定参数:

    @mixin ml($value: 10px) {
    float: left;
    margin-left: $value;
    }
    .div1 {
    @include ml(20px);
    }

    继承机制

    Sass 还提供了继承机制,允许一个选择器继承另一个选择器。

    假如有一个消息框,除了基础样式外,其还有成功和失败样式,用 CSS 写法是这样的:

    .msg {
    border: 1px solid #e3e3e3;
    background: #dff0d8;
    }
    .msg-success {
    color: #4cae4c;
    }
    .msg-error {
    color: #d43f3a;
    }

    如果以上定义样式,需要在每个标签都多加一个 .msg 的类名,使用 Sass 继承机制后:

    .msg {
    border: 1px solid #e3e3e3;
    background: #dff0d8;
    }
    .msg-success {
    @extend .msg;
    color: #4cae4c;
    }
    .msg-error {
    @extend .msg;
    color: #d43f3a;
    }

    其编译后:

    .msg, .msg-success, .msg-error {
    border: 1px solid #e3e3e3;
    background: #dff0d8;
    }
    .msg-success {
    color: #4cae4c;
    }
    .msg-error {
    color: #d43f3a;
    }

    不难看出其实也可以用 @mixin
    实现相同的效果,但不同的是:继承拷贝的是选择器,而混合拷贝的是样式片段。关于两者之间如何选择官方文档也有说明,详细戳这里。

    自定义函数

    Sass 提供的函数和 JS 的函数差不多,主要用于一些计算或者结合控制语句使用。

    比如移动端开发时可以封装成一个函数用于把 px 转成 rem:

    $baseFontSize: 20;
    @function px2rem($val) {
    @return $val/$baseFontSize + rem;
    }
    
    .big-text{
    font-size: px2rem(30);
    }

    小结

    本文主要阐述了 Sass 基本的入门用法,用于日常开发足矣。如果想更加深入了解 Sass 的高级用法,可以参考 Sass官方中文文档

  • 相关阅读:
    android添加群组源码
    onItemClickListener不起作用解决办法2(原创)
    Android中layout过程详解
    android上一些方法的区别和用法的注意事项 (转载)
    Android中mesure过程详解
    AlertDialog dismiss 和 cancel方法的区别
    按Notification 回到正在运行的activity
    android添加联系人源码
    Use Eclipse
    数据区的内存模型
  • 原文地址:https://www.cnblogs.com/xiewangfei123/p/14807470.html
Copyright © 2020-2023  润新知