文档章节

sass 指令学习

bosscheng
 bosscheng
发布于 2016/03/24 17:08
字数 282
阅读 37
收藏 1

格式化风格

nested      缩进嵌套css (默认的)
expanded    没有缩进。扩展的css
compact    简洁格式的css
compressed   压缩之后的css

变量

$blue: #fff;

使用#{} 嵌套字符串


$side:left;

.test{
    border-#{$side}-radius:5px
}

计算功能

使用 *  /   +     - 
进行计算


嵌套

原来代理
div h1{
    color:red;
}

// scss 可以这样

div{
    h1{
        color:red;
    }
}


在嵌套里面,可以使用&引用父元素,比如 a:hover的写法
a{
    &:hover{
        color: red;
    }
}


继承

比如已经有了class1 了
.class1{
    
}

这边class2可以继承 class1的

.class2{
    @extend .class1;
}

mixin

对于mixin有点像 c语言里面的宏,可以重用的代码块
使用@mixin指令,定义一个代码块


@mixin left{
    float:left;
    margin-left:10px
}


// 也可以指定参数和缺省值
@mixin left($value:10px){
    float:left;
    margin-left:$value;
}

颜色函数

sass 提供一些内置的颜色函数


插入文件

@import 方法


@if 条件判断

@else 命令

@if 1 + 1 == 2 {  border: 1px solid; }


循环语句 for  / while  语句  each 语句 

@for $i from 1 to 10 {
    .border-#{$i} {
      border: #{$i}px solid blue;
    }
  }
  
  
  
  $i: 6;
  @while $i > 0 {
    .item-#{$i} { width: 2em * $i; }
    $i: $i - 2;
  }
  

自定义函数

@funcion double($n){
    @return $n * 2;
}




© 著作权归作者所有

上一篇: 移动端JavaScript
下一篇: css杂类收集3
bosscheng
粉丝 80
博文 303
码字总数 95443
作品 0
南京
前端工程师
私信 提问
Sass开发环境的配置

创建运行Sass的环境 ruby安装 因为sass依赖于ruby环境,所以装sass之前先确认装了ruby。先导官网下载个ruby 在安装的时候,请勾选Add Ruby executables to your PATH这个选项,添加环境变量,...

ybyron
2016/09/09
0
0
Sass 3.2.0 发布,CSS 预处理器

Sass 3.2.0 发布了,Sass 扩展了 CSS3,增加了规则、变量、混入、选择器、继承等等特性。Sass 生成良好格式化的 CSS 代码,易于组织和维护。 Sass 3.2.0 版本主要改进记录: 1. mixin支持内容...

oschina
2012/08/12
1K
0
Sass入门介绍

CSS预处理器,用一种专门的语言进行页面Web样式设计,编译生成正常的CSS文件以供使用,可以让CSS更加简洁、适应性更强、可读性更佳、更易于代码的维护。 优秀的CSS预处理器语言包括Sass、LES...

刘尐六
2017/05/26
0
0
分享一个vue项目“脚手架”项目的实现步骤

搭建缘由 源于公司每次新启动一个由多人协同开发的项目都由负责人初始化项目之后,每个人再去从私服pull一下项目才开始开发。但是每次初始化工程都是一步步的造轮子,一个个依赖去安装,新建...

开元中国2015
05/27
46
0
sass学习研究

这篇文章是算是前两天学习sass的一个摘要和总结吧,简单记载下。希望对大家有所帮助 对于什么是sass,我想现在大家可能都有所了解了。其实就是css的一种开发工具,或者也可以说是将css编程化...

邪气小生
2016/02/19
89
0

没有更多内容

加载失败,请刷新页面

加载更多

mysql概览

学习知识,首先要有一个总体的认识。以下为mysql概览 1-架构图 2-Detail csdn |简书 | 头条 | SegmentFault 思否 | 掘金 | 开源中国 |

程序员深夜写bug
34分钟前
2
0
golang微服务框架go-micro 入门笔记2.2 micro工具之微应用利器micro web

micro web micro 功能非常强大,本文将详细阐述micro web 命令行的功能 阅读本文前你可能需要进行如下知识储备 golang分布式微服务框架go-micro 入门笔记1:搭建go-micro环境, golang微服务框架...

非正式解决方案
今天
1
0
前端——使用base64编码在页面嵌入图片

因为页面中插入一个图片都要写明图片的路径——相对路径或者绝对路径。而除了具体的网站图片的图片地址,如果是在自己电脑文件夹里的图片,当我们的HTML文件在别人电脑上打开的时候图片则由于...

被毒打的程序猿
今天
2
0
Flutter 系列之Dart语言概述

Dart语言与其他语言究竟有什么不同呢?在已有的编程语言经验的基础上,我们该如何快速上手呢?本篇文章从编程语言中最重要的组成部分,也就是基础语法与类型变量出发,一起来学习Dart吧 一、...

過愙
今天
2
0
rime设置为默认简体

转载 https://github.com/ModerRAS/ModerRAS.github.io/blob/master/_posts/2018-11-07-rime%E8%AE%BE%E7%BD%AE%E4%B8%BA%E9%BB%98%E8%AE%A4%E7%AE%80%E4%BD%93.md 写在开始 我的Arch Linux上......

zhenruyan
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部