sass小总结
一般有两种后缀 .sass和.scss,推荐使用后者。
写下自己对sass的理解
1.变量
$border-color:#c66;
$border:1px solid $border-color;
变量中包括全局变量和局部变量。全局变量即使全局都可以引用的。局部变量定义在选择器内或mixin里的变量。只在固定作用于内有效。
局部变量加上!gloable可以转化为全局变量(自己的 理解);eg
@mixin button-style {
$btn-bg-color: lightblue !global;
color: $btn-bg-color;
} button {
@include button-style;
} .wrap {
background: $btn-bg-color;
} css
.wrap{background:lightblue;}
!default变量的默认值;默认变量之前重新声明下变量,即可覆盖默认值。eg:
$color:#333;
$color:#666!default;
.box{
color:$color;
} css
.box{color:#333;}
2.继承嵌套
分为选择器嵌套和属性嵌套
①选择器嵌套,eg:
.box{
ul{
li{
float:left;
}
}
}
②属性嵌套,eg:
p{
border:{
color:red;
}
}
border后要加冒号;
选择器继承:class2可以继承class1的样式;eg:
.class1{color:red;}
.class2{
@extend .class1;
}
3.定义函数
sass中有写好的函数可以拿来用。Mix(),RGBA(),Lighten(),darken()等;
4.Mixin
sass中使用@mixin
声明混合,可以传递参数,参数名以$符号开始,多个参数以逗号分开,也可以给参数设置默认值。声明的@mixin
通过@include
来调用。(参考http://www.w3cplus.com/sassguide/syntax.html)
5.占位
这种选择器的优势在于:如果不调用则不会有任何多余的css文件,避免了以前在一些基础的文件中预定义了很多基础的样式,然后实际应用中不管是否使用了@extend
去继承相应的样式,都会解析出来所有的样式。占位选择器以%
标识定义,通过@extend
调用。
6.@extend调用占位符
@include继承@mixin的函数
7.语句 if else for @each学习中。。。
8,计算。学习中...
9.@at-root跳出嵌套,&引用父元素,这两个可以配合使用;eg: ???
.child{
@at-root .parent &{
color:#c66;
}
} .parent .child{color:#c66;}
10.判断变量是否存在
Sass提供了两个函数,用来测试一个变量是否存在。我们可以使用variable-exists
或global-variable-exists
函数来检查我们的局部变量或全局变量是否分别存在。
@if(global-variable-exists(divBorder)) {
.save-cancel-btns{
border: $divBorder;
}
}
sass小总结的更多相关文章
- vue2.0+element+node+webpack搭建的一个简单的后台管理界面
闲聊: 今天是六一儿童节哟,小颖祝大家节日快乐哈哈哈.其实这个demo小颖断断续续做了将近两个礼拜了,心塞的,其实这个也没有多难,主要是小颖有点最近事情有点多,所以就把这个一直拖着,今天好不容易做好了 ...
- compass Sprites 雪碧图 小图片合成[Sass和compass学习笔记]
demo 源码 地址 https://github.com/qqqzhch/webfans 什么是雪碧图? CSS雪碧 即CSS Sprites,也有人叫它CSS精灵,是一种CSS图像合并技术,该方法 ...
- 关于前端CSS预处理器Sass的小知识!
前面的话 "CSS预处理器"(css preprocessor)的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件.SASS是一种CSS的开发工 ...
- Sass使用小技巧
1.任何可以用作css属性值的赋值都可以用作sass变量值.如果变量值与属性不匹配,sass会当作普通字符串来处理. $family: "microsoft yahei", Ari ...
- 初遇sass的两个小问题
关于sass大家都知道是一种css的开发工具,原本的css没有变量 参数一类的东西,所以比较死 效率较慢. sass就是在css里面加入了一些编程的元素如变量等,让css能够更灵活,提高效率. 刚接触 ...
- 通过微信小程序看前端
前言 2016年9月22日凌晨,微信官方通过“微信公开课”公众号发布了关于微信小程序(微信应用号)的内测通知.整个朋友圈瞬间便像炸开了锅似的,各种揣测.介绍性文章在一夜里诞生.而真正收到内测邀请的公众 ...
- 快速了解微信小程序的使用,一个根据小程序的框架开发的todos app
微信官方已经开放微信小程序的官方文档和开发者工具.前两天都是在看相关的新闻来了解小程序该如何开发,这两天官方的文档出来之后,赶紧翻看了几眼,重点了解了一下文档中框架与组件这两个部分,然后根据简易教程, ...
- 微信小程序首次官方分享的纪要
先交代备注: 这次有关小程序的分享只有技术的 QA环节,其他如产品.入口.流量.与公众号的整合等等,回答都是暂时无法给出答案或不确定: 小程序最终发布时间官方也还未确定,不过说应该就是近期: 小程序的 ...
- css预处理器sass使用教程(多图预警)
css预处理器赋予了css动态语言的特性,如变量.函数.运算.继承.嵌套等,有助于更好地组织管理样式文件,以及更高效地开发项目.css预处理器可以更方便的维护和管理css代码,让整个网页变得更加灵活可 ...
随机推荐
- BZOJ 1855 股票交易(单调队列优化DP)
题目链接:http://61.187.179.132/JudgeOnline/problem.php?id=1855 题意:最近lxhgww又迷上了投资股票, 通过一段时间的观察和学习,他总结出了股票 ...
- js将数组元素随机排序的方法
在群里看见的一个面试题,试了一下,还是可以做出来的,但是需要查资料,主要是岁一些方法了解的不清楚,可能这个跟我平时不太注重基础理论有关系,像什么构造函数啊,我根本就不关心什么叫构造函数,我一直都以为我 ...
- Mac功夫——OS X应用技巧
看过不少文章说Mac是了不起的先进操作系统,爱折腾的我,经不住诱惑,也玩起了Mac,用惯了Windows,突然换到Mac下还真是十分不习惯,就连复制粘贴这种简单操作也觉得很是别扭. 用过一段时间才感觉 ...
- webAPI获得链接客户端IP地址
public static class HttpRequestMessageExtensions { private const string HttpContext = "MS_HttpC ...
- Common Macros for Build Commands and Properties
https://msdn.microsoft.com/en-us/library/c02as0cs.aspx $(ProjectDir) The directory of the proje ...
- hihoCoder太阁最新面经算法竞赛17
比赛链接:http://hihocoder.com/contest/hihointerview26 A.排序后枚举两个点,确定一个矩形后二分剩下两个点. #include <bits/stdc+ ...
- [HDOJ1231]最大连续子序列
混了好几个地方的博客,还是觉得博客园比较靠谱,于是决定在这里安家落户了.本人本科生一个,希望各位巨巨多多指教~ Hello World! 单独一个象征性的问候实在是太low了,还是决定来点实质性的.. ...
- Hibernate 配置 转(http://blog.csdn.net/b671900/article/details/39156065)
做项目必然要先进行数据库表设计,然后根据数据库设计建立实体类(VO),这是理所当然的,但是到公司里做项目后,让我认识到,没有说既进行完数据库设计后还要再“自己”建立一变VO.意思是,在项目设计时,要么 ...
- FZU 2213 Common Tangents(公切线)
Description 题目描述 Two different circles can have at most four common tangents. The picture below is a ...
- ubuntu14.04配置静态IP地址
1. 找到文件并作如下修改:vim /etc/network/interfaces修改如下部分:# interfaces(5) file used by ifup(8) and ifdown(8)au ...