本文总结sass相关核心知识点

说明:本文的内容是,我在开发实践中总结的实用性比较强的sass知识点,其他未涉及的知识,如果对你有作用请自行查阅

sass知识目录

嵌套

注释

SassScript

@规则

Mixin指令


  1. 嵌套

    一般写法
    div{
    p {}
    }
    &父选择器引用
    div{
    &:hover {}
    &-span { background:red; }
    }
    相同前缀的css样式简写形式
    div{
    font: {
    family: fantasy;
    size: 30em;
    weight: bold;
    }
    }
    div{
    font: 20px/24px fantasy {
    weight: bold;
    }
    }
  2. 注释

    多行注释 /* */ 会被编译成css中的注释
    单行注释 // 在编译后的css中去除
  3. SassScript

    声明变量
    局部变量 $width: 2px;
    全局变量 $width: 50px !global;
    数据类型
    number -> 1 11.1 11px
    string -> "title"
    应用
    $name: "p";
    div #{$name} {
    width: 100px;
    }
    color -> red
    boolean -> true
    null -> null
    list -> 11px 10px 12px 或者 11px, 10px, 12px
    map -> (key: value, key1: value1)
    function
    运算符
    + - * / % < > <= >=
    其中 / 运算只在以下三种情况中生效
    $width/2 和变量运算
    (10px/8px) 加上小括号
    5px + 8px/2px 作为其他运算表达式的一部分
  4. @规则

    @import 导入其他的css,scss文件
    @import "demo"; 等效于 @import "demo.scss";
    scss文件默认会编译成css文件,如果你的scss文件只想被其他文件import,可以在定义的文件名前面加上_
    如 _demo.scss 然后使用 @import "demo" 即可
    嵌套的@import
    假设_demo.scss文件中定义了如下的css
    div{
    width: 100%;
    }
    在main.css中导入
    .box {
    @import "demo";
    }
    将编译成
    .box div{
    width: 100%;
    }
    @media 嵌套
    编译后@media包裹在选择器的最上面,在做响应式时候,这种写法可以避免重复书写选择器
    div {
    width: 100%;
    @media screen {
    height: 100%;
    }
    }
    @extend 选择器替换继承
    基本使用
    div{
    width: 100%;
    }
    div.box {
    height: 100%;
    }
    #id{
    @extend div;
    }
    相当于将包含div的选择器的样式复制一份,然后把div替换成#id,编译后结果如下
    div, #id {
    width: 100%;
    }
    div.box, .box#id {
    height: 100%;
    }
    占位符
    div ye%box{
    width: 100%;
    }
    #id{
    @extend %box;
    }
    编译后结果
    div ye#id {
    width: 100%;
    }
  5. Mixin指令

    相当于定义函数
    @mixin size($w, $h) {
    width: $w;
    height: $h;
    }
    div{
    @include size(100%, 100%);
    }

sass实用知识点的更多相关文章

  1. HTML5实用知识点

    本文讲解HTML5实用知识点 新增的表单type Canvas使用 SVG使用 Audio使用 Video使用 网页缓存 文件缓存 后台worker Server-Sent Events 定位 拖放功 ...

  2. Sass 主要知识点小记

    Sass 主要知识点小记 以前写样式的时候,每个元素的颜色,背景色都需要重新写一遍,然后就想CSS难道没有变量么?最后就查到Sass.但当时没有静下心来好好的看一下,今天正好有时间,就在这里边看边整理 ...

  3. canvas学习笔记,实用知识点总结(上)

    本博客是本人日常学习笔记,作为重要知识点的总结记录,随笔风格可能更倾向于个人的学习习惯和方式,若对您有帮助十分荣幸,若存在问题欢迎互相学习探讨,前端小白一枚在此恭候. 一.基本使用规则 1.创建画布 ...

  4. dubbo实用知识点总结(三)

    1. 服务降级 2. 优雅停机 3. 主机绑定 4. 访问日志 5. Multicast注册中心 6. zookeeper注册中心 7. 推荐用法 8. 容量规划 9. 基准测试工具包

  5. dubbo实用知识点总结(一)

    1. dubbo基础架构 架构 特性 服务提供者 服务消费者 配置可以用dubbo.properties来替换 2. 注解配置 提供方(注意:serivce注解是dubbo的service) 消费者 ...

  6. dubbo实用知识点总结(二)

    1. 参数验证 2. 结果缓存 3. 泛化引用 客户端没有对应接口类的情况,可以直接调用 4. 泛化实现 5. 回声测试 用于检测服务是否可用 6. 上下文信息 7. 隐式传参(不常用) 8. 异步调 ...

  7. WPF实用知识点

    1.一个基本的WPF程序, 需要引入的程序集WindowsBase, PresentationCore, PresentationFramework using System; using Syste ...

  8. Node.js实用知识点

    本文介绍如何使用nodejs 简单的HttpServer 调试nodejs 基础路由 nodejs配置开发和生产环境 nodejs核心模块一览 express用法 文件I/O nodejs模块 nod ...

  9. Mysql实用知识点总结

    本文介绍MYSQL相关知识,方便日常使用查阅 目录 准备 MYSQL常用命令 语言结构 sql语句 外键 自然语言全文搜索 准备 你可以使用 Navicat Premium 12 或者 MySQL W ...

随机推荐

  1. sqlserver 实时同步(发布订阅)

    配置发布订阅手册 不同版本须知:https://www.sqlmanager.net/en/articles/1548 向后兼容性:参考https://docs.microsoft.com/zh-cn ...

  2. java assert的使用并深入解析Java的assertion

    java assert的使用并深入解析Java的assertion 分类: java2012-12-05 13:32 2020人阅读 评论(0) 收藏 举报 原文出处:http://blog.csdn ...

  3. Java -- JDBC 数据库连接池

    1. 原理代码示例 public class JdbcPool implements DataSource { private static LinkedList<Connection> ...

  4. 【转载】JAVA多线程读取、操作List集合

    本文转载自:http://blog.csdn.net/wang1989cs/article/details/47663565 import java.util.ArrayList; import ja ...

  5. Android Studio2.3中简单配置,释放C盘空间

    重新安装了一下android studio,由于占用了太多的C盘空间.记录一下,在网上收集到的studio中两个主要占用C盘空间的文件,我们将它移除C盘. 原博地址: http://blog.csdn ...

  6. Python给数字前固定位数加零

    python中有一个zfill方法用来给字符串前面补0,非常有用 n = " s = n.zfill(5) " zfill()也可以给负数补0 n = "-123&quo ...

  7. Spring Boot入门——多文件上传大小超限问题解决

    多文件上传中遇到上传文件大小的问题 org.apache.tomcat.util.http.fileupload.FileUploadBase$FileSizeLimitExceededExcepti ...

  8. 防止xss,sql攻击函数

    <?php //php防注入和XSS攻击通用过滤. //by qq:831937 $_GET && SafeFilter($_GET); $_POST && Sa ...

  9. 51nod 1102 单调栈

    http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1102 1102 面积最大的矩形 基准时间限制:1 秒 空间限制:1310 ...

  10. 计算机网络【六】:传输层-TCP概述 【转】

    转自:http://blog.chinaunix.net/uid-26275986-id-4109209.html 根据TCP/IP协议的分层结构,网络层之上是传输层,从层次结构上来看,传输层位于网络 ...