暂时使用的是:Koala,监测转义
$fff: #ffffff;
$red:red;
 
h1{
  color: $fff;
}
简单调用
 
 
#content{
    color: $fff;
    .con{
      content: $red;
     }
}
或者:
#content,#nei{
   a{
     color: $fff;
    }
}
#content a{color: #fff; }
#nei a{color: #fff; }
嵌套(css里面嵌套要复制什么的,挺麻烦)
 
#content a{
      color: $fff;
      &:hover{
       color: $red;
      }
}
或者:
#content a{
      color:$fff;
      body.ie &{
        color: $red
      }
}
//当body的class为ie的时候,#content a的颜色为red颜色
&是父级标识符~
 
article{
~article{border-top: 1px dashed #ccc }
>section{background: #eee }
dl>{
dt{color: #333 }
dd{color: #555 }
}
nav+ & {margin-top: 0 }
}
article ~article{border-top: 1px dashed #ccc  }
article>section{background: #eee }
article dl>dt{color: #333 }
article dl>dd{color: #555  }
nav+article{margin-top: 0 }
 
 
nav{
  border:{
    color:$fff;
    style:solid;
    width:1px;
  }
}
编译出来后:nav{ border-style: solid; border-width: 1px; border-color: #ccc;}
 
还有中嵌套方法:
nav{
        border:red solid 1px {
           left:0px;
           right:0px;
           }
       }
编译出来就是: nav { border: 1px solid #ccc; border-left: 0px; border-right: 0px; }
 
注:sass的变量是可覆盖的,也就是说可以重复,后面的覆盖前面的
 
$fancybox-width: 400px !default;
defult相当于css里的!important,不过!defult是应用于变量的,且,其含义是,如果该变量已声明赋值,则无效,否则,就用这个defult的值,也就是设置变量默认值
 
sass支持局部导入,即是在css规则内导入:例:
  a{
    background:red;
        color:blue;
  }
  上面这个是theme.scss的内容
  .content{
     @import "theme";
   //只有在content这个类内才会使用theme.scss的样式
  } 
  输出结果:
  .content a{
       background:red;
              color:blue;
  }
 
sass中导入css不会用,
 

sass中的注释相关:
/*这种注释编译后会显示在css中*/
//这种注释编译后只会显示在scss中而不会显示到css中
 
body { color /* 这块注释内容不会出现在生成的css中 */: #333; padding: 1; /* 这块注释内容也不会出现在生成的css中 */ 0;}
 
 

混合器
@mixin name{
  border-radius:5px;
  -webkit-border-radius:5px;
  -o-border-radius:5px;
}
.btn{
   background:red;
 @include name;
 }
 
输出为:
.btn{
   background:red;
   border-radius:5px;
  -webkit-border-radius:5px;
  -o-border-radius:5px;
 }
这种写法的话好在公用模块,以后调用起来相同样式会很轻松,不过一般是用来处理hack的
还有种技巧是:
@mixin ulPublic{
    color:red;
    li{
        color:blue;
    }
}
ul{
    @include ulPublic;
}
输出是:
ul {
  color: red;
}
ul li {
  color: blue;
}
 
还有下面这种写法:
@mixin olpublic($defult,$hover,$active ){
    li a{
    color: $defult;
    &:hover {color: $hover};
    &:active  {color: $active };
    }
}
ol{
   @include olpublic(red,yellow,green);
}
输出:
ol li a {
  color: red;
}
ol li a:hover {
  color: yellow;
}
ol li a:active {
  color: green;
}
 
(感觉有了sass会快捷很多,同时也会增加模块化的概念)
 
下面的写法是模块化公用:
@mixin module(
   $normal,
   $hover: $normal,
   $link: $normal
)
{
    color: $normal;
    &:hover{color:$hover}
    &:link{color:$link}
 
}
.module span{
    @include module(yellow);
}
输出为:
.module span {
  color: yellow;
}
.module span:hover {
  color: yellow;
}
.module span:link {
  color: yellow;
}
统一调用
 
注:混合选择器不仅包含css规则,也包含选择器和选择器中的属性

继承@extend
@mixin name{
    border-radius:5px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    -o-border-radius:5px;
    -ms-border-radius:5px;
}
.btn{
      background: $fff;
      color: $fff;
      border: $borderNo;
      @include name;
}
.extend span{
    @extend .btn;
}
 
会输出:
.btn, .extend span {
  background: #7abbff;
  color: #7abbff;
  border: none;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -o-border-radius: 5px;
  -ms-border-radius: 5px;
}
 
继承比较高级的应用:
直接继承元素原生属性。。。(不对,只能继承自己写的)
  注释:最常用的一种高级用法是继承一个html元素的样式。尽管默认的浏览器样式不会被继承,因为它们不属于样式表中的样式,但是你对html元素添加的所有样式都会被继承

sass语法练习解析--实例练习的更多相关文章

  1. SASS语法备忘

    sass语法 关于sass 3.3.0更新说明——3.3.0 sublime相关插件为:scss语法高亮,sass语法高亮,编译,保存即编译,格式化 文件后缀名 sass有两种后缀名文件:一种后缀名为 ...

  2. SQL[连载2]语法及相关实例

    SQL[连载2]语法及相关实例 SQL语法 数据库表 一个数据库通常包含一个或多个表.每个表由一个名字标识(例如:"Websites"),表包含带有数据的记录(行). 在本教程中, ...

  3. Vue项目中sass语法该怎么用?

    最近开始着手Vue框架,被各种报错蹂躏,其中有一个就是sass语法,<style>标签中添加<style lang="scss">,发现报错,在网上找了一些 ...

  4. JSON解析实例——使用Json-lib

    JSON解析实例——使用Json-lib Json-lib下载及使用 本文介绍用一个类库进行JSON解析. 工具下载地址:http://sourceforge.net/projects/json-li ...

  5. 为sublime text2 添加SASS语法高亮

    以前写CSS时,都是直接写样式,没有任何的第三方工具,后面发现越是面向大网站,越难管理,上次参加完携程UED大会后,发现SASS对于前端团队多人协作和站点代码维护上很有帮助,很多同学都开始用了,我还是 ...

  6. Solr系列五:solr搜索详解(solr搜索流程介绍、查询语法及解析器详解)

    一.solr搜索流程介绍 1. 前面我们已经学习过Lucene搜索的流程,让我们再来回顾一下 流程说明: 首先获取用户输入的查询串,使用查询解析器QueryParser解析查询串生成查询对象Query ...

  7. JavaScript中hoisting(悬置/置顶解析/预解析) 实例解释,全局对象,隐含的全局概念

    JavaScript中hoisting(悬置/置顶解析/预解析) 实例解释,全局对象,隐含的全局概念 <html> <body> <script type="t ...

  8. pcapng文件的python解析实例以及抓包补遗

    为了弥补pcap文件的缺陷,让抓包文件可以容纳更多的信息,pcapng格式应运而生.关于它的介绍详见<PCAP Next Generation Dump File Format> 当前的w ...

  9. 1-3 Sass 语法、编译、调试

    Sass 语法格式 这里说的 Sass 语法是 Sass 的最初语法格式,他是通过 tab 键控制缩进的一种语法规则,而且这种缩进要求非常严格.另外其不带有任何的分号和大括号.常常把这种格式称为 Sa ...

随机推荐

  1. nodejs事件循环

    1. 只有一个主线程,node开始执行脚本时,会先进事件循环初始化(同步任务,发出异步请求,规划定时器生效时间,执行promise.nextTick等),这是事件循环还未开始. 2. nodejs每一 ...

  2. PLECS—模型仿真——第十一周作业

    1. 直流电机单闭环调速系统比例控制仿真 (1)整体电路图 (2)控制部分电路图 (3)参数设置+仿真结果 2. 直流电机单闭环调速系统比例积分控制仿真 (1)参数设置 (2)仿真结果 3. 直流电机 ...

  3. yii2 源码分析 object类分析 (一)

    转载请注明链接http://www.cnblogs.com/liuwanqiu/p/6737327.html yii2基本上所有的类都是继承的object类,下面就来分析一下object类吧 obje ...

  4. Docker命令行安装Shipyard

    1.下载自动部署Shell脚本 curl -sSL https://shipyard-project.com/deploy | bash -s 自动部署脚本中, 包括以下参数: ACTION: 表示可 ...

  5. Linux下的压力测试工具:ab、http_load、webbench、siege

    一.ab 1.1 介绍 ab是apache自带的一款功能强大的测试工具.      安装了apache一般就自带了. 1.2 下载 同apache. 1.3 安装 同apache. 1.4 安装结果 ...

  6. egametang网络系统组件

    先看一下网络组件的中层: AService抽象了udp和tcp协议的连接工厂,udp的连接方式也被封装的和tcp类似,但是一个接收连接的UService只能建立一个连接.这个接口既可以做服务端通过Ac ...

  7. 在windows端和linux端安装Git

    一.Git的安装 1. 在windows端 到地址:https://git-scm.com/downloads 选择对应版本下载后,进行傻瓜式安装即可 2.  在linux端 查看是否安装了git,出 ...

  8. 排序算法(Java实现)

    这几天一直在看严蔚敏老师的那本<数据结构>那本书.之前第一次学懵懵逼逼,当再次看的时候,发觉写的是非常详细,非常的好. 那就把相关的排序算法用我熟悉的Java语言记录下来了.以下排序算法是 ...

  9. java设计模式-----2、工厂方法模式

    再看工厂方法模式之前先看看简单工厂模式 工厂方法模式(FACTORY METHOD)同样属于一种常用的对象创建型设计模式,又称为多态工厂模式,此模式的核心精神是封装类中不变的部分,提取其中个性化善变的 ...

  10. Java经典编程题50道之四十

    将几个字符串排序(按英文字母的顺序). public class Example40 {    public static void main(String[] args) {        Stri ...