<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>bingxiaoxiao</title>

    <link rel="stylesheet" href="../css/demo.css">

</head>

<body>

    <!-- 使用变量 -->

    <div class="selected">使用变量</div>

    <!-- 嵌套CSS 规则 -->

    <div id="content">

        <article class="article ">

            <h1>我就是标题</h1>

            <p class="">bingxiaoxiao , hello word</p>

        </article>

        <aside class="footer">

            版权 -

        </aside>

    </div>

    <!-- 子组合选择器和同层组合选择器：>、+和~;

    article section { margin: 5px }

    article > section { border: 1px solid #ccc }

    你可以用子组合选择器>选择一个元素的直接子元素。上例中，第一个选择器会选择article下的所有命中section选择器的元素。

    第二个选择器只会选择article下紧跟着的子元素中命中section选择器的元素。

    可以用同层相邻组合选择器+选择header元素后紧跟的p元素：header + p { font-size: .1em }

    你也可以用同层全体组合选择器~，选择所有跟在article后的同层article元素，不管它们之间隔了多少其他元素：article ~ article { border-top: 1px dashed #ccc } -->

    <!-- css中注释的作用包括帮助你组织样式、以后你看自己的代码时明白为什么这样写，以及简单的样式说明。但是，你并不希望每个浏览网站源码的人都能看到所有注释。

    sass另外提供了一种不同于css标准注释格式/* ... */的注释语法，即静默注释，其内容不会出现在生成的css文件中。静默注释的语法跟JavaScriptJava等类C的语言中单行注释的语法相同，

    它们以//开头，注释内容直到行末。

    body {

      color: #; // 这种注释内容不会出现在生成的css文件中

      padding: ; /* 这种注释内容会出现在生成的css文件中 */

    } -->

    <!-- 混合器 -->

    <div class="notice">我是混合器</div>

    <ul class="plain"><li>当一个包含css规则的混合器通过@include包含在一个父规则中时，在混合器中的规则最终会生成父规则中的嵌套规则</li></ul> 

    <!-- 继承 -->

    <div class="seriousError">我要继承</div>

</body>

</html>


demo.sass


// 1.使用变量

// sass使用$符号来标识变量

// sass并不想强迫任何人一定使用中划线或下划线，所以这两种用法相互兼容。用中划线声明的变量可以使用下划线的方式引用，反之亦然

$highlight-color: #F90;

$highlight-border: 1px solid $highlight-color;

.selected {

  border: $highlight-border;

}

// 2.嵌套CSS 规则

$nav-color: #F90;

$color-theme:red;

#content {

  article {

    h1 { color: $nav-color }

    p { font-size:18px;background: $nav-color}

    // 父选择器的标识符&;

    &:hover { color: $color-theme }

  }

  aside { background-color: gold ;color: $color-theme;text-decoration:underline }

}

// 4. 静默注释;

// body {

//   color: #333; // 这种注释内容不会出现在生成的css文件中

//   padding: 0; /* 这种注释内容会出现在生成的css文件中 */

// }

// 5.混合器  混合器使用@mixin标识符定义   样式表中通过@include来使用这个混合器，放在你希望的任何地方。

@mixin rounded-corners {

  -moz-border-radius: 5px;

  -webkit-border-radius: 5px;

  border-radius: 5px;

}

.notice {

  background-color: green;

  border: 2px solid #00aa00;

  @include rounded-corners;

}

@mixin no-bullets {

  list-style: none;

  li {

    list-style-image: none;

    list-style-type: none;

    margin-left: 0px;

  }

}

ul.plain {

  color: red;

  @include no-bullets;

}

//6.通过选择器继承继承样式  @extend 继承

.error {

  border: 1px solid red;

  background-color: #fdd;

}

.seriousError {

  @extend .error;

  border-width: 3px;

}


												


											
SASS 简单实用的更多相关文章
	

    
								
  1. jQuery的几种简单实用效果
		
    许久未分享博客,或许已生疏. 闲来无事, 分享几个jQuery简单实用的效果案例 不喜勿喷... 1.页面常用的返回顶部 <!DOCTYPE html> <html lang=&qu ...
    
		
    2. 
						
  2. 经验分享：10个简单实用的 jQuery 代码片段
		
    尽管各种 JavaScirpt 框架和库层出不穷,jQuery 仍然是 Web 前端开发中最常用的工具库.今天,向大家分享我觉得在网站开发中10个简单实用的 jQuery 代码片段. 您可能感兴趣的相 ...
    
		
    3. 
						
  3. 简单实用的PHP防注入类实例
		
    这篇文章主要介绍了简单实用的PHP防注入类实例,以两个简单的防注入类为例介绍了PHP防注入的原理与技巧,对网站安全建设来说非常具有实用价值,需要的朋友可以参考下   本文实例讲述了简单实用的PHP防注 ...
    
		
    4. 
						
  4. php简单实用的操作文件工具类（创建、移动、复制、删除)
		
    php简单实用好用的文件及文件夹复制函数和工具类(创建.移动.复制.删除) function recurse_copy($src,$dst) {  // 原目录,复制到的目录 $dir = opend ...
    
		
    5. 
						
  5. 基于Bootstrap简单实用的tags标签插件
		
    http://www.htmleaf.com/jQuery/ jQuery之家 自由分享jQuery.html5和css3的插件库 基于Bootstrap简单实用的tags标签插件
    
		
    6. 
						
  6. C#_简单实用的翻页
		
    简单实用的生成翻页HTML辅助类 C# using System.Text; namespace ClassLibrary { /// <summary> /// /// </sum ...
    
		
    7. 
						
  7. 简单实用的Windows命令（一）
		
    前几天新买了一台笔记本电脑,使用了一下几个简单的查看电脑配置的命令,觉得非常的不错,在此记录一下 一:运行命令的方式有两种 1:使用快捷键WIN+R,然后在弹出的“运行”对话框中输入对应的命令 2:在 ...
    
		
    8. 
						
  8. 简单实用的Windows命令（二）
		
    昨天简单的记录了几个非常简单实用的Windows命令,不过我又想起来还有两个我在实际的工作中也是经常用到的命令——PING和IPCONFIG,不过我在工作中的使用都是非常简单的,用PING命令检测对应 ...
    
		
    9. 
						
  9. iOS边练边学--多线程介绍、NSThread的简单实用、线程安全以及线程之间的通信
		
    一.iOS中的多线程 多线程的原理(之前多线程这块没好好学,之前对多线程的理解也是错误的,这里更正,好好学习这块) iOS中多线程的实现方案有以下几种 二.NSThread线程类的简单实用(直接上代码 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. MySQL 大表优化方案（长文）
			
    当MySQL单表记录数过大时,增删改查性能都会急剧下降,可以参考以下步骤来优化: 单表优化 除非单表数据未来会一直不断上涨,否则不要一开始就考虑拆分,拆分会带来逻辑.部署.运维的各种复杂度,一般以整型 ...
    
			
    2. 
						
  2. 如何将本地大文件通过终端上传到linux服务器
			
    第一种方式:  SecureCRT下   上传文件只需在shell终端仿真器中输入命令“rz”,即可从弹出的对话框中选择本地磁盘上的文件,利用Zmodem上传到服务器当前路径下.   下载文件只需在s ...
    
			
    3. 
						
  3. 【托业】【新东方托业全真模拟】TEST05~06-----P5~6
			
    credit A with B 把A归功于B present A with B 给A赠送B proofread thoroughly 彻底地校对:exclusively 专门地:独占地:apparen ...
    
			
    4. 
						
  4. （4.8）mysql备份还原——binlog查看工具之show binlog的使用
			
    (4.8)mysql备份还原——binlog查看工具之mysqlbinlog及show binlog的使用 关键词:show binlog,mysql binlog查看,二进制文件查看,binlog查 ...
    
			
    5. 
						
  5. java框架之Hibernate(2)-持久化类&主键生成策略&缓存&事务&查询
			
    持久化类 概述 持久化:将内存中的对象持久化到数据库中的过程就是持久化.Hibernate 就是用来进行持久化的框架. 持久化类:一个 Java 对象与数据库的表建立了映射关系,那么这个类在 Hibe ...
    
			
    6. 
						
  6. 设置mac笔记本为固定ip
			
    第一步.点击Mac桌面“系统偏好设置”图标 第二步.在打开的系统偏好设置界面,点击互联网和无线选项中的“网络” 第三步.在网络界面,点击“高级”,进入高级设置.  第四步.在以太网设置界面,在TCP/ ...
    
			
    7. 
						
  7. C#设计模式(2)——简单工厂模式（转）
			
    C#设计模式(2)——简单工厂模式   一.引言 这个系列也是自己对设计模式的一些学习笔记,希望对一些初学设计模式的人有所帮助的,在上一个专题中介绍了单例模式,在这个专题中继续为大家介绍一个比较容易理 ...
    
			
    8. 
						
  8. C语言进阶之路（一）----C语言的内存四区模型
			
    内存四区模型:操作系统给C/C++编写的程序分配内存,通常将分配的内存划分为以下四个区域:1.栈区:存放局部变量,用完由操作系统自动释放2.堆区:动态分配给程序的内存区域,由程序员手动释放3.数据区: ...
    
			
    9. 
						
  9. 既然选择了远方，便只顾风雨兼程--myvue
			
    浅谈以下vue的模式,其实vue的模式跟react是一样的,都是MVVM模式,就是直接数据和视图之间的切换 如果单纯这样认识的话,和angular相比较起来,vue就简单的很多,但是事实情况并不是这样 ...
    
			
    10. 
						
  10. c# 结构的使用
			
    类的定义的是引用类型,重点在堆上创建,有的时候类只包含极少的数据,因为管理堆而造成的开销是很大的.这时候更好的做法就是将类型定义成结构.结构是值类型,在栈上存储,能有效的减小内存管理的开销.c#基元类 ...
    
			
    11.