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 ...
随机推荐
- HTML5高防win8风格
使用HTML5做了一个高防Win8的页面,大家看看怎么样 Java..NET.PHP.Android.iOS.HTML5,CSS3. web前端.视频资料下载网站 http://51pansou.c ...
- ThinkPHP之中的事务回滚
小李子 获取thinkphp之中执行的SQL: 1.用调试模式的追踪trace功能: 2.代码: $user_type=D('user_type'); $datass=array('school_id ...
- memcache 简单入门应用
1.memcache 简介和安装: 下载:下载文件,解压到某个地方. 2.数据存储格式 键值对,一个key对应一个值,一个值在内存中占用一个或多个4k大小的块. 3.php使用memcache的方式 ...
- 重拾C,一天一点点_8
这两天发现一个问题,我最近发的几篇博文稀里糊涂地被转到别的网站去了,目前发现有两个网站转载了,一个注明了作者出处(博客园 lltong),但没给任何链接.另一个网站呢,就是直接抓的,而且还抓的乱七八糟 ...
- 射击比赛 (POJ 1719) 题解
[问题描述] 我们假设射击的目标是一个由R*C(2≤R≤C≤ 1000)个小方格组成的矩形网格.网格中每一列恰有2个白色的小方格和R-2个黑色的小方格.定义网格的行从顶至底编号为1~R,列从左至右编号 ...
- 关于js中this的疑问
学习bootstrap.js源码中被js里边的this绕的有点晕 /* ================================================================ ...
- 改用二进制启动Moses translation model提示Can't read ~/working/binarised-model/reordering-table
解决方案: 换成 /home/用户名/working 貌似就好使了...但是时间还是估计太长,明早挂机一天试试,顺便把manual 的详细部分看了
- 对云风 cstring 第二次解析
前言 从明天起 关心粮食和蔬菜 我有一所房子 面朝大海 春暖花开 本文前提条件 1.了解 posix 线程 2.了解 原子操作 3.具备简单C基础,或者 你也敲一遍. 如果上面不太清楚,你可以翻看我以 ...
- linux命令行下使用R语言绘图
系统:centos 6.4 64bit 环境安装参考:http://hi.baidu.com/solohac/item/4a18e78f1bef9b5825ebd99c 在R语言中可以使用png()等 ...
- 使用angular封装echarts
Echarts是一个开源的图表组件,图表比较丰富,工作中需要用到它来搭建一个数据展示系统.但是系统原有的框架是基于angular的,而echarts是基于原生js的,如果直接使用的话就丢失了angul ...