sass实用知识点
本文总结sass相关核心知识点
说明:本文的内容是,我在开发实践中总结的实用性比较强的sass知识点,其他未涉及的知识,如果对你有作用请自行查阅
sass知识目录
-
一般写法
div{
p {}
}
&父选择器引用
div{
&:hover {}
&-span { background:red; }
}
相同前缀的css样式简写形式
div{
font: {
family: fantasy;
size: 30em;
weight: bold;
}
}
div{
font: 20px/24px fantasy {
weight: bold;
}
}
-
多行注释 /* */ 会被编译成css中的注释
单行注释 // 在编译后的css中去除
-
声明变量
局部变量 $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 作为其他运算表达式的一部分
-
@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%;
}
-
相当于定义函数
@mixin size($w, $h) {
width: $w;
height: $h;
}
div{
@include size(100%, 100%);
}
sass实用知识点的更多相关文章
- HTML5实用知识点
本文讲解HTML5实用知识点 新增的表单type Canvas使用 SVG使用 Audio使用 Video使用 网页缓存 文件缓存 后台worker Server-Sent Events 定位 拖放功 ...
- Sass 主要知识点小记
Sass 主要知识点小记 以前写样式的时候,每个元素的颜色,背景色都需要重新写一遍,然后就想CSS难道没有变量么?最后就查到Sass.但当时没有静下心来好好的看一下,今天正好有时间,就在这里边看边整理 ...
- canvas学习笔记,实用知识点总结(上)
本博客是本人日常学习笔记,作为重要知识点的总结记录,随笔风格可能更倾向于个人的学习习惯和方式,若对您有帮助十分荣幸,若存在问题欢迎互相学习探讨,前端小白一枚在此恭候. 一.基本使用规则 1.创建画布 ...
- dubbo实用知识点总结(三)
1. 服务降级 2. 优雅停机 3. 主机绑定 4. 访问日志 5. Multicast注册中心 6. zookeeper注册中心 7. 推荐用法 8. 容量规划 9. 基准测试工具包
- dubbo实用知识点总结(一)
1. dubbo基础架构 架构 特性 服务提供者 服务消费者 配置可以用dubbo.properties来替换 2. 注解配置 提供方(注意:serivce注解是dubbo的service) 消费者 ...
- dubbo实用知识点总结(二)
1. 参数验证 2. 结果缓存 3. 泛化引用 客户端没有对应接口类的情况,可以直接调用 4. 泛化实现 5. 回声测试 用于检测服务是否可用 6. 上下文信息 7. 隐式传参(不常用) 8. 异步调 ...
- WPF实用知识点
1.一个基本的WPF程序, 需要引入的程序集WindowsBase, PresentationCore, PresentationFramework using System; using Syste ...
- Node.js实用知识点
本文介绍如何使用nodejs 简单的HttpServer 调试nodejs 基础路由 nodejs配置开发和生产环境 nodejs核心模块一览 express用法 文件I/O nodejs模块 nod ...
- Mysql实用知识点总结
本文介绍MYSQL相关知识,方便日常使用查阅 目录 准备 MYSQL常用命令 语言结构 sql语句 外键 自然语言全文搜索 准备 你可以使用 Navicat Premium 12 或者 MySQL W ...
随机推荐
- sqlserver 实时同步(发布订阅)
配置发布订阅手册 不同版本须知:https://www.sqlmanager.net/en/articles/1548 向后兼容性:参考https://docs.microsoft.com/zh-cn ...
- java assert的使用并深入解析Java的assertion
java assert的使用并深入解析Java的assertion 分类: java2012-12-05 13:32 2020人阅读 评论(0) 收藏 举报 原文出处:http://blog.csdn ...
- Java -- JDBC 数据库连接池
1. 原理代码示例 public class JdbcPool implements DataSource { private static LinkedList<Connection> ...
- 【转载】JAVA多线程读取、操作List集合
本文转载自:http://blog.csdn.net/wang1989cs/article/details/47663565 import java.util.ArrayList; import ja ...
- Android Studio2.3中简单配置,释放C盘空间
重新安装了一下android studio,由于占用了太多的C盘空间.记录一下,在网上收集到的studio中两个主要占用C盘空间的文件,我们将它移除C盘. 原博地址: http://blog.csdn ...
- Python给数字前固定位数加零
python中有一个zfill方法用来给字符串前面补0,非常有用 n = " s = n.zfill(5) " zfill()也可以给负数补0 n = "-123&quo ...
- Spring Boot入门——多文件上传大小超限问题解决
多文件上传中遇到上传文件大小的问题 org.apache.tomcat.util.http.fileupload.FileUploadBase$FileSizeLimitExceededExcepti ...
- 防止xss,sql攻击函数
<?php //php防注入和XSS攻击通用过滤. //by qq:831937 $_GET && SafeFilter($_GET); $_POST && Sa ...
- 51nod 1102 单调栈
http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1102 1102 面积最大的矩形 基准时间限制:1 秒 空间限制:1310 ...
- 计算机网络【六】:传输层-TCP概述 【转】
转自:http://blog.chinaunix.net/uid-26275986-id-4109209.html 根据TCP/IP协议的分层结构,网络层之上是传输层,从层次结构上来看,传输层位于网络 ...