SASS学习笔记_01
scss两种格式
sass 大括号
scss css写法
Arguments: --no-cache –style compressed --update $FileName$:css/$FileNameWithoutExtension$.css
标示部分是 输出的css类型 和额外输出路径 就是 输出的css是不是压缩 然后项目目录建立css文件夹放到里面去
--style
nested:嵌套缩进的css代码
expanded:没有缩进扩展的css代码
compact:简洁格式的css代码
compressed:压缩后的css代码;
=====================================================
变量
$变量名:值;
$global-color:yellow
$global-border:1px solid $global-color;
调用
.nav{
background:$global;
}
标量嵌套
.navbar{
border:$global-border
}
嵌套规则:


引用符:


第一个 引用的是当前所在的元素
第二个是引用的所有父级元素
-----------------------------------------------------------------------
群组选择器嵌套

简化

-----------------------------------------------------------------------
子选择器属性

生成

-----------------------------------------------------------------------
属性嵌套


-----------------------------------------------------------------------
属性选择器2


------------------------------------------------------------------------
SASS学习笔记_01的更多相关文章
- Sass学习笔记(补充)
阅读目录 1. Sass和SCSS的区别 2. @while循环 3. @at-root 4. @content 5. 凸显注释 6. CSS输出样式 7. 重置浏览器样式 8. Sass调试和@de ...
- Sass学习笔记之入门篇
Sass又名SCSS,是CSS预处理器之一,,它能用来清晰地.结构化地描述文件样式,有着比普通 CSS 更加强大的功能. Sass 能够提供更简洁.更优雅的语法,同时提供多种功能来创建可维护和管理的样 ...
- sass学习笔记1
less在处理CSS动画时,非常恶心,决定转向sass了.sass诞生得比less早,只是因为它是ruby写的,因此受众面够少.但我们不需要自己下编译器或使用命令行,我们可以koala这神器 首先几个 ...
- 菜鸟的 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/ ...
- Sass学习笔记
语法 @each $var in <list>//循环就是去遍历一个列表,然后从列表中取出对应的值 @while $types > 0 //循环直到函数不成立 SASS函数 To-u ...
- SASS学习笔记(1)
序 之前稍微看过SASS的文档,但是由于工作中没有涉及,渐渐的搁置了.最近公司新招来一个热情似火的前端,不管什么技术,不管自己能不能hold住,都提出来用一用再说.这样对我也好,跟着这个哥们混妥妥的长 ...
- sass学习笔记2
今天介绍sass在重用代码时最具威力的两个功能.一个是嵌套(Nesting),一个混合(Mixin). 我们在写CSS通过需要多个后代选择器组合到一起才能定位到目标元素上,而这定义过程,此元素的父元素 ...
- SASS学习笔记2 —— 语法
sass有两种后缀名文件:一种后缀名为sass,不使用大括号和分号:另一种是scss文件,这种和我们平时写的css文件格式差不多,使用大括号和分号.在此也建议使用后缀名为scss的文件,以避免sass ...
随机推荐
- DataGridView控件判断滚动条是否滚动到当前已加载的数据行底部
private void dgvLoad_Scroll(object sender, ScrollEventArgs e) { if (e.ScrollOrientation == ScrollOri ...
- 获取屏幕分辨率(C/C++)
C/C++获取屏幕分辨率的方法 int main(int argc, char* argv[]) { // 需要添加头文件: // #include <Windows.h> system( ...
- 【转】IE11的变化
1.navigator.userAgent中不再包含“MSIE”关键字 2.用javascript的判断是否是IE11的方法是: var isIE11 = (sUserAgent.toLowerCas ...
- Android计时器TimerTask,Timer,Handler
Android计时器TimerTask,Timer,若要在TimerTask中更新主线程UI,鉴于Android编程模型不允许在非主线程中更新主线程UI,因此需要结合Android的Handler实现 ...
- smarty第一天
1.安装 安装Smarty发行版在/libs/目录里的库文件(就是解压了). 2.工作原理 美工人员 1. 写模板, HTML CSS JavaScript 2. 使用Smarty表现逻辑 放变量, ...
- 共享内存shared pool (6):追踪sql语句
构建实验数据 --使用NC50用户查询(会话1) SQL> conn NC50/NC50 Connected. SQL> create table emp as select * from ...
- django-url调度器-初级篇
Django 遵从 MVC 模型,并将其特色化为 MTV 模型.模型的核心是通过用户访问的 url 来指向处理的函数,而函数处理后返回相应的结果.所以url决定了用户访问的入口,另外表单处理的提交地址 ...
- 解决Unable to resolve superclass的问题
之前在GITHUB上看到大蛋的高级设置,昨晚于是就拿来编译.. 结果真是个悲伤的故事,放手机上居然运行不了,这种时候只能看LOG了! 看LOG得出的信息如下: - ::): threadid=: in ...
- 理解ruby on rails中的ActiveRecord::Relation
ActiveRecord::Relation是rails3中添加的.rails2中的finders, named_scope, with_scope 等用法,在rails3统一为一种Relation用 ...
- Power of Four
Given an integer (signed 32 bits), write a function to check whether it is a power of 4. Example:Giv ...