sass学习总结
SASS是一种CSS的开发工具,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护。个人简单总结了下比较常用的的一些东西。
$ 开头定义变量名 是个全局变量 在{ $name } 局部变量
&代表父级 a{ &:hover{} } a{} a:hover{}
.a{ .b,.c,.d{} } .a .b,.a .c,.a ,d{} 群组
.a,.b{ a{}} .a a,.b a{} 群组
.a{ border : { style:solid;width:1px;color:#ccc } } 属性嵌套 ‘:’ 必写
@at-root 在嵌套里标记用的 生成出来css是独立的 跳出嵌套
_aa.scss 一般为 局部文件 其实 @import 引入的时候 _可以不写
$aa:10 !default !default设置默认值
@mixin 混合器 @include 调用
布尔值 and(与)\or(或)\not(非)
comparable($numver-1,$numver-2) 判断是否能相加 返回 布尔值 true/false
unit($numver) 判断 $numver 的单位
unitless($numver) 判断数值是否有单位 返回布尔值 没有单位是 true 反之 false
type-of($value) 返回类型 类似于js typeof
@function @return 必须要有返回值
#{...} 插值
@for $i from 1 to 5 \ @for $i from 1 through 5 前者是到4不到5 后者循环到5
@for $i from $strat through $end 开始结束如果是 strat 大就从小到大 反之亦然
@if 判断条件{}@else{} 判断
@include a($a:10,$b:20) 可以传类似于json的值
sass学习总结的更多相关文章
- Sass学习笔记(补充)
阅读目录 1. Sass和SCSS的区别 2. @while循环 3. @at-root 4. @content 5. 凸显注释 6. CSS输出样式 7. 重置浏览器样式 8. Sass调试和@de ...
- Sass学习第一天
Sass学习 网站学习地址: Sass中文网:https://www.sass.hk/docs/#t7-3 Airen的博客:https://www.w3cplus.com/preprocessor/ ...
- Sass学习笔记之入门篇
Sass又名SCSS,是CSS预处理器之一,,它能用来清晰地.结构化地描述文件样式,有着比普通 CSS 更加强大的功能. Sass 能够提供更简洁.更优雅的语法,同时提供多种功能来创建可维护和管理的样 ...
- gulp + webpack + sass 学习
笔记: new webpack.optimize.CommonsChunkPlugin 核心作用是抽离公共代码,chunks:['index.js','main.js'] 另一个作用就是单独生成一个j ...
- sass学习笔记1
less在处理CSS动画时,非常恶心,决定转向sass了.sass诞生得比less早,只是因为它是ruby写的,因此受众面够少.但我们不需要自己下编译器或使用命令行,我们可以koala这神器 首先几个 ...
- sass学习(2)——关于变量
定义一个sass变量 可以说,变量是一个编程语言的基础.所以对于sass来说,变量肯定是浓墨重彩的其中一笔,当然函数也是.那我们如何声明定义一个sass的变量呢? 变量的符号$ 变量名称 变量的值 那 ...
- sass学习(1)——了解sass
为什么要选择sass 我们在手写css中,会遇到很多很麻烦的问题.倒不是一些技术的问题,而是工程量的问题.例如,如何可以代替难记的16进制颜色,如何可以让层次更清晰,还有重复的代码该如何偷懒.其实这一 ...
- sass 学习
本来看了阮一峰和于江水两位老师的博客,有看了ionic自带的sass文件,原以为自己已经是很熟悉,精通了.可是我居然连ruby都不知道真实惭愧啊,辛亏看了www.sass.hk 我想这篇官方文档肯定 ...
- 菜鸟的 Sass 学习笔记
介绍 sass 是什么?? 在sass的官网,它是这么形容给自己的 Sass is the most mature, stable, and powerful professional grade C ...
- SASS学习笔记!(持续学习中..)
工具 : koala 学习网址 : http://www.w3cplus.com/sassguide/syntax.html http://sass-lang.com/documentation/ ...
随机推荐
- JS多线程(web work)
JS多线程JS多线程不允许操作DOM 1. 引用Concurrent Thread.js库用法:Concurrent.Thread.Create(function(){};) 2. Web Workh ...
- Java基础学习(三)
/* java中的八种基本数据类型: 整数: byte . short . int . long 小数: float double 字符: char 布尔: boolean 字符串的类型: Strin ...
- js对象克隆方法
方法1: function clone(obj){ var o; switch(typeof obj){ case 'undefined': break; case 'string' : o = ob ...
- VS2015 编译 Qwt6.1.3
VS2015 + Qt5.7 编译 Qwt6.1.3 1. 将 qwtconfig.pri 中的 C:\Qwt 改为 D:/ProgramFiles/C_Library/Qwt/Qwt , 我的Qw ...
- Esri的开源JS项目杂谈
一提到Esri大家首先想到的是庞大的ArcGIS产品大家族,其产品包含从桌面端,到服务器/云端,再到web/移动端.作为一名极客,不聊开源逼格似乎上不去啊.其实,Esri作为一个开放的平台,不仅有稳定 ...
- 微信测试服务器验证sha1加密法,工具类
1 package org.fc.Util; import java.security.MessageDigest; import java.security.NoSuchAlgorithmExcep ...
- cocoapods导入shareSDK分享实现
这个在官方文档没有说这两个库是必须导入的,但是不导入是会有错误的 pod 'ShareSDK3/ShareSDKConfigurationFile' pod 'ShareSDK3/ShareSDKEx ...
- 在公司里面,如何让笔记本连上wifi?
1.复制谷歌浏览器图标的快捷方式,重命名为chrome Android,鼠标右键设置该快捷方式的属性,在目标处,加上 C:\Users\admin\AppData\Local\Google\Chrom ...
- centos 6.5 yum安装 mysql 5.6
1. 查看系统里面有没有mysql 的repo yum repolist all | grep mysql 2. 如果没有发现,则需要配置repo 注意,如果要使用5.7 或者其他任何版本,只能有 ...
- 转载:移动web开发规范
本文来源:http://blog.csdn.net/joueu/article/details/44329825 以下是规范建议,均是日常在开发当中的的一些经验,仅供参考. 移动web开发规范 一.头 ...