Sass入门——基本特性-基础

$brand-primary : darken(#428bca, 6.5%) !default; // #337ab7
$btn-primary-color : #fff !default;
$btn-primary-bg : $brand-primary !default;
$btn-primary-border : darken($btn-primary-bg, 5%) !default;
$baseLineHeight: 2;
$baseLineHeight: 1.5 !default;
body{
line-height: $baseLineHeight;
}
编译后的CSS:
body{
line-height:;
}
调用变量:
"$变量名"放在你想调用的地方就行了。
$color: orange !default;//定义全局变量(在选择器、函数、混合宏...的外面定义的变量为全局变量)
.block {
color: $color;//调用全局变量
}
em {
$color: red;//定义局部变量
a {
color: $color;//调用局部变量
}
}
span {
color: $color;//调用全局变量
}
<header>
<nav>
<a href=“##”>Home</a>
<a href=“##”>About</a>
<a href=“##”>Blog</a>
</nav>
<header>
想选中header中的a标签,CSS:
nav a {
color:red;
}
header nav a {
color:green;
}
Sass:
nav{
a{
color: red;
header & {
color: green;
}
}
}
.box {
border-top: 1px solid red;
border-bottom: 1px solid green;
}
那么Sass可以这样写:
.box{
border: {
top: 1px solid red;
bottom: 1px solid green;
}
}
.clearfix{
&:before,
&:after {
content:"";
display: table;
}
&:after {
clear:both;
overflow: hidden;
}
}
@mixin border-radius{
-webkit-border-radius: 5px;
border-radius: 5px;
}
带参数混合宏
@mixin border-radius($radius:5px){
-webkit-border-radius: $radius;
border-radius: $radius;
}
@mixin box-shadow($shadow...){
@if length($shadow) >= 1 {
@include prefixer(box-shadow, $shadow);
} @else{
$shaow: 0 0 4px rgba(0,0,0,0.3);
@include prefixer(box-shadow, $shadow);
}
}
button {
@include border-radius;
}
@mixin border-radius($radius){
-webkit-border-radius: $radius;
border-radius: $radius;
}
调用时给混合宏传一个参数值:
.box{
@include border-radius(3px);
}
传一个带值的参数
@mixin border-radius($radius:3px){
-webkit-border-radius: $radius;
border-radius: $radius;
}
调用时可以直接调用混合宏"border-radius"
.btn{
@include border-radius;
}
当然也可以在调用时再给混合宏的参数传值:
.box{
@include border-radius(50%);
}
传多个参数
@mixin center($width,$height){
width: $width;
height: $height;
position: absolute;
top: 50%;
left: 50%;
margin-top: -($height) / 2;
margin-left: -($width) / 2;
}
一个特别的参数"...",当混合宏传入的参数过多时,可以用这个参数来代替。
@mixin box-shadow($shadow...){
@if length($shadows) >= 1 {
-webkit-box-shadow: $shadows;
box-shadow: $shadows;
} @else {
$shadows: 0 0 2px rgba(#000,.25);
-webkit-box-shadow: $shadow;
box-shadow: $shadow;
}
}
混合宏的不足
生成冗余的代码块
@mixin border-radius{
-webkit-border-radius: 3px;
border-radius: 3px;
}
.box {
@include border-radius;
margin-bottom: 5px;
}
.btn {
@include border-radius;
}
生成的CSS
.box {
-webkit-border-radius: 3px;
border-radius: 3px;
margin-bottom: 5px;
}
.btn {
-webkit-border-radius: 3px;
border-radius: 3px;
}
扩展/继承
.btn {
border: 1px solid #ccc;
padding: 6px 10px;
font-size: 14px;
}
.btn-primary {
background-color: #f36;
color: #fff;
@extend .btn;
}
.btn-second {
background-color: orange;
color: #fff;
@extend .btn;
}
编译后的CSS
.btn, .btn-primary, .btn-second {
border: 1px solid #ccc;
padding: 6px 10px;
font-size: 14px;
}
.btn-primary {
background-color: #f36;
color: #fff;
}
.btn-second {
background-clor: orange;
color: #fff;
}
占位符 %placeholder
%声明的代码如果不被@extend调用,不会产生任何的代码。
%mt5 {
margin-top: 5px;
}
%pt5{
padding-top: 5px;
}
.btn {
@extend %mt5;
@extend %pt5;
}
.block {
@extend %mt5;
span {
@extend %pt5;
}
}
编译后的CSS:
.btn, .block {
margin-top: 5px;
}
.btn, .block span {
padding-top: 5px;
}

$properties: (margin, padding);
@mixin set-value($side, $value) {
@each $prop in $properties {
#{$prop}-#{$side}: $value;
}
}
.login-box {
@include set-value(top, 14px);
}
编译成CSS:
.login-box {
margin-top: 14px;
padding-top: 14px;
}
再来看一个例子(构建一个选择器)
@mixin generate-sizes($class, $small, $medium, $big) {
.#{$class}-small { font-size: $small; }
.#{$class}-medium { font-size: $medium; }
.#{$class}-big { font-size: $big; }
}
@include generate-sizes("header-text", 12px, 20px, 40px);
编译成CSS:
.header-text-small { font-size: 12px; }
.header-text-medium { font-size: 20px; }
.header-text-big { font-size: 40px; }

Sass入门——基本特性-基础的更多相关文章
- 1-4 Sass的基本特性-基础
[Sass]声明变量 定义变量的语法: 在有些编程语言中(如,JavaScript)声明变量都是使用关键词“var”开头,但是在 Sass 不使用这个关键词,而是使用大家都喜欢的美元符号“$”开头.我 ...
- Sass 基本特性-基础 笔记
一.变量声明 $ 变量的声明使用 $ 所有的变量必须声明到变量调用之前 从3.4版本开始,Sass已经可以正确处理作用域的概念 在局部范围声明一个已经存在于全局内的变量时,局部变量就会成为全 ...
- Sass入门及知识点整理
Sass 快速入门 | SASS 中文网 文档链接:https://www.sasscss.com/getting-started/ 前言 之前整理了一篇关于Less的,现在就来整理一下关于Sass的 ...
- 快速入门系列--WebAPI--01基础
ASP.NET MVC和WebAPI已经是.NET Web部分的主流,刚开始时两个公用同一个管道,之后为了更加的轻量化(WebAPI是对WCF Restful的轻量化),WebAPI使用了新的管道,因 ...
- CSS进阶之SASS入门指南
CSS进阶之SASS入门指南 随着跟着公司学习项目的前端的推进,越来越对好奇了许久的SASS垂涎欲滴,哈哈,可能这个词使用不当,没有关系,就是对SASS有一股神秘的爱!好了,闲话不多说 ...
- [转]快速入门系列--WebAPI--01基础
本文转自:http://www.cnblogs.com/wanliwang01/p/aspnet_webapi_base01.html ASP.NET MVC和WebAPI已经是.NET Web部分的 ...
- Sass入门指南
转自:http://www.imooc.com/article/1413 css预处理器已经算不上一个新鲜的词了,当前比较有代表性的css预处理器有sass.less.stylus.关于三者选择问题一 ...
- 005 01 Android 零基础入门 01 Java基础语法 01 Java初识 05 Eclipse简介
005 01 Android 零基础入门 01 Java基础语法 01 Java初识 05 Eclipse简介 Eclipse是一款集成开发工具--IDE. 集成开发环境(IDE,Integrated ...
- Membership三步曲之入门篇 - Membership基础示例
Membership 三步曲之入门篇 - Membership基础示例 Membership三步曲之入门篇 - Membership基础示例 Membership三步曲之进阶篇 - 深入剖析Pro ...
随机推荐
- MarkDown使用 (二)矩阵
MarkDown的矩阵输入 MarkDown的矩阵输入 简单的Matrix 例如 $$ \begin{matrix} 1 & 2 & 3 \\ 4 & 5 & 6 \\ ...
- JSP与Servlet的中文乱码处理
注:百度来的,改了改... jsp页面的的头要设置好 <%@ page language="java" contentType="text/html; charse ...
- HTML语法
2014-01-21/21:28:59 网页制作概述 HTML是WEB页面的描述性语言 CSS为HTML样式机制 JavaScript为交互WEB设计最佳选择 CSS\JavaScript\PHP都可 ...
- 窗函数的C语言实现
一般的讲数字信号处理的书中都会提到窗函数.大多数只会提及其中的几种.这里我把这些窗都用C语言实现了一下,都不复杂,但如果要自己去弄也挺费时间.所有函数都用Matlab验证了.包括以下窗: /*窗类型* ...
- Java的接口及实例
一.定义 Java接口(Interface),是一系列方法的声明,是一些方法特征的集合,一个接口只有方法的特征没有方法的实现,因此这些方法可以在不同的地方被不同的类实现,而这些实现可以具有不同的行为( ...
- UVA-548Tree(二叉树的递归遍历)
Tree Time Limit: 3000MS Memory Limit: Unknown 64bit IO Format: %lld & %llu Submit Status Des ...
- hdu 5040 BFS 多维化处理图
http://acm.hdu.edu.cn/showproblem.php?pid=5040 跟这一题http://blog.csdn.net/u011026968/article/details/3 ...
- 交换机VLAN研究
这两天在研究openWRT的网络接口问题,涉及到了交换机的一些概念,主要是跟VLAN相关的,在此总结一下. VLAN在802.11Q中定义,802.11Q帧格式如下图所示: 交换机示意图如下图所示: ...
- 关于new Function使用以及将json格式字符串转化为json对象方法介绍
一直对Function()一知半解,今日就Function()的使用做一下总结 一.函数实际是功能完整的对象,用Fucntion()直接创建函数. 语法规则: var 函数名 = new Fun ...
- ajax联动
1.编写html代码,引入ajax文件 <script type="text/javascript" src="js/ajax.js"></s ...