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 ...
随机推荐
- js设计模式(11)---命令模式
0.前言 早上好,早晨的时光总是美好的,坐在空调屋里,看着外边的蓝天白云,不停地敲击着键盘,多么美好地享受,也许屌丝就是如此容易满足. 1.什么是命令模式? 用于将一个请求封装为一个对象,从而可用不同 ...
- 设置DataGridView 显示自己添加编辑的列名,不动态显示数据库本身
设置DataGridView 显示自己添加编辑的列名,不动态显示数据库本身. 方法: (1)界面操作,把DataGridView控件拖放在窗体中,就看到DataGridView控件的右上角有个小三角, ...
- 前端基础 - Defer对象
参考:http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquery_deferred_object.html < ...
- BF算法和KMP算法(javascript版本)
var str="abcbababcbababcbababcabcbaba";//主串 var ts="bcabcbaba";//子串 function BF( ...
- jquery源码学习--iceDog
/** * @FileName : iceDog * @Author : PheonixHkbxoic * @Mail : hkbxoic@gmail.com * @DateTime : 2016-0 ...
- MongoDB工具介绍
在Windows下面,mongodb就只有一个bin目录以及bin目录以外的三个文件,相对bin目录中包括了如下文件: bsondump.exe 用于将导出的BSON文件格式转换为JSON格式 mon ...
- (转)Android系统自带Activity样式(@android:style/)
在AndroidManifest.xml文件的activity中配置 1.android:theme="@android:style/Theme" 默认状态,即如果theme这里不 ...
- 关于 mvc 中 连字符 - 和下划线 _转换的问题。
[潜水]大崔||哈尔滨(759666247) 10:02:16 如图 C#不承认 “-”[知府]古道今-湖北\xig<systemobject@126.com> 10:03:54 ...
- C语言接口的写法(以toyls命令为例)
#include <unistd.h> #include <stdio.h> #include <stdlib.h> #include <string.h&g ...
- JQUERY 判断选择器选择的对象 是否存在
判断方法: 直接选择判断,是不正确的方法,因为 $(“#id”) 不管对象是否存在都会返回 object . if($("#id")){ alert('存在'); }else{ a ...