Scss基础用法
Scss基础用法
一、注释用法:
(1)//comment:该注释只是在.scss源文件中有,编译后的css文件中没有。
(2)/! /:重要注释,任何style的css文件中都会有,一般放置css文件版权说明等信息。
(3)/ /:该注释在compressed的style的css中没有,其他style的css文件都会含有。
二、变量:
1.一般以$开头,有作用域限制
$color: red;
.div{
background-color: $color;
}
2.若子选择器中定义的变量想成为全局变量,可以用!global
.div{
$width: 5px !global;
width: $width;
} .p{
width: $width;
}
3.嵌套引用,需#{}进行包裹
$left: left;
.div{
border-#{$left}-width: 5px;
}
4.计算
$left: 20px;
.div{
margin-left: $left + 12px;
margin-top: $left / 2;
}
三、选择器
1.选择器嵌套(允许属性嵌套)
.div{
.span{
height: 12px;
}
.p{
border: {
color: red;
}
}
}
2.引用父元素(使用&符号)
.div{
&:hover{
cursor: pointer;
}
}
四、代码复用
1.继承(若在div2后再加一个div1,也会影响div2的属性)
.div1{
font-size: 14px;
}
.div2{
@extend .div1;
color: red;
}
2.引用外部的scss文件(文件路径建议用相对路径)
@import ‘ ./test.scss’;
3.Mixin与Include
//使用@mixin命令,定义一个代码块
@mixin left {
float: left;
margin-left: 5px;
} //使用@include命令,调用这个mixin代码块
div {
@include left;
}
五、参数
eg1:
@mixin common($value1, $value2, $defaultValue: 5px){
display: block;
margin-left: $value1;
margin-right: $value2;
padding: $defaultValue;
}
.div1{
font-size: 8px;
@include common(11px, 13px, 15px);
}
.div2{
font-size: 8px;
@include common(11px, 13px);
}
eg2:
//生成浏览器前缀。
@mixin rounded($vert, $horz, $radius: 10px) {
border-#{$vert}-#{$horz}-radius: $radius;
-moz-border-radius-#{$vert}#{$horz}: $radius;
-webkit-border-#{$vert}-#{$horz}-radius: $radius;
} //使用的时候调用:
#navbar li { @include rounded(top, left); }
#footer { @include rounded(top, left, 5px); }
六、条件语句
可以用@if(){}来判断,也可以用@if(){}@else来判断
@if lightness($color) > 30% {
background-color: #000;
} @else {
background-color: #fff;
}
七、循环语句
1.for循环
@for $i from 1 to 10 {
.border-#{$i} {
border: #{$i}px solid blue;
}
}
2.while循环
$i: 6;
@while $i > 0 {
.item-#{$i} { width: 2em * $i; }
$i: $i - 2;
}
3.each(类似于for)
@each $member in a, b, c, d {
.#{$member} {
background-image: url("/image/#{$member}.jpg");
}
}
八、函数
可以自定义函数
@function double($n) {
@return $n * 2;
} #sidebar {
width: double(5px);
}
Scss基础用法的更多相关文章
- PropertyGrid控件由浅入深(二):基础用法
目录 PropertyGrid控件由浅入深(一):文章大纲 PropertyGrid控件由浅入深(二):基础用法 控件的外观构成 控件的外观构成如下图所示: PropertyGrid控件包含以下几个要 ...
- logstash安装与基础用法
若是搭建elk,建议先安装好elasticsearch 来自官网,版本为2.3 wget -c https://download.elastic.co/logstash/logstash/packag ...
- elasticsearch安装与基础用法
来自官网,版本为2.3 注意elasticsearch依赖jdk,2.3依赖jdk7 下载rpm包并安装 wget -c https://download.elastic.co/elasticsear ...
- BigDecimal最基础用法
BigDecimal最基础用法 用字符串生成的BigDecimal是不会丢精度的. 简单除法. public class DemoBigDecimal { public static void mai ...
- Vue组件基础用法
前面的话 组件(Component)是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.根据项目需求,抽象出一些组件,每个组件里包含了展现.功能和样式.每个页面,根据自己所需, ...
- Smarty基础用法
一.Smarty基础用法: 1.基础用法如下 include './smarty/Smarty.class.php';//引入smarty类 $smarty = new Smarty();//实例化s ...
- 前端自动化测试神器-Katalon的基础用法
前言 最近由于在工作中需要通过Web端的功能进行一次大批量的操作,数据量大概在5000左右,如果手动处理, 完成一条数据的操作用时在20秒左右的话,大概需要4-5个人/天的工作量(假设一天8小时的工作 ...
- Bootstrap fileinput:文件上传插件的基础用法
官网地址:http://plugins.krajee.com/ 官网提供的样例:http://plugins.krajee.com/file-input/demo 基础用法一 导入核心CSS及JS文件 ...
- asyncio 基础用法
asyncio 基础用法 python也是在python 3.4中引入了协程的概念.也通过这次整理更加深刻理解这个模块的使用 asyncio 是干什么的? asyncio是Python 3.4版本引入 ...
随机推荐
- [Aaronyang] 写给自己的WPF4.5 笔记12[自定义控件-AyImageButton的过程 2/4]
我的文章一定要做到对读者负责,否则就是失败的文章 --------- www.ayjs.net aaronyang技术分享 博文摘要:点击前往文章正文 学会怎样给用户提供事件接口,本例子 ...
- 在代码中设置RelativeLayout布局中标签的android:layout_toLeftOf、android:layout_toRightOf等属性
需要动态改变RelativeLayout里面控件的相对位置,经一个技术群的群友提示,找到了如下的方法,做下记录: RelativeLayout.Layoutparams params = (Rel ...
- 团队工作效率分析工具gitstats
如果你是团队领导,关心团队的开发效率和工作激情:如果你是开源软件开发者,维护者某个repo:又或者,你关心某个开源软件的开发进度,那么你可以试一试gitstats. gitstats 是一个git仓库 ...
- LeetCode OJ 238. Product of Array Except Self 解题报告
题目链接:https://leetcode.com/problems/product-of-array-except-self/ 238. Product of Array Except Se ...
- vue子父组件的通信
Element使用的是Vue2.0版本,众所周知在Vue 1.0升级到2.0中去除了$broadcast和$dispatch方法. 1.父组件向子组件传值 a.app.vue父组件 <templ ...
- 2. Tensorflow的数据处理中的Dataset和Iterator
1. Tensorflow高效流水线Pipeline 2. Tensorflow的数据处理中的Dataset和Iterator 3. Tensorflow生成TFRecord 4. Tensorflo ...
- hdoj:2040
#include <iostream> #include <vector> using namespace std; vector<long> yueShu(lon ...
- C语言学习之路
c语言学习 初识c语言 c语言数据类型.运算符和表达式(整数浮点数) 字符型数据/字符串 算术运算符和算术表达式(优先级,结合性等) 顺序程序设计(运算符之类内容,字符输入输出等) C/C++ 查看数 ...
- C艹目录
c++ 学习路线 c++学习路线 c++ 学习目录 c++ 常用数据类型,命名规则, 不常有数据类型 C++复合类型(数组) C艹复合类型(字符串) C++复合类型(结构体) C++ 结构体和枚举 ...
- (转)java 层调用Jni(Ndk) 持久化c c++ 对象
对于Jni(Ndk) 很多人应该都有印象,Android的ndk接触到的机会相对会比较多,本例子以android平台为例,pc端的话就以简单的windows为例, 编码完用vs 或是 gcc进行编译成 ...