<!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. day5_函数返回值
			
    每个函数都有返回值,如果没有在函数里面指定返回值的话,在python里面函数执行完之后,默认会返回一个None,函数也可以有多个返回值,如果有多个返回值的话,会把返回值都放到一个元组中,返回的是一个元 ...
    
			
    2. 
						
  2. Spring Boot事务管理（中）
			
    在上一篇 Spring Boot事务管理(上)的基础上介绍Spring Boot事务属性和事务回滚规则 . 4 Spring Boot事务属性 什么是事务属性呢?事务属性可以理解成事务的一些基本配置, ...
    
			
    3. 
						
  3. luogu2839 [国家集训队]middle
			
    题目链接:洛谷 题目大意:给定一个长度为$n$的序列,每次询问左端点在$[a,b]$,右端点在$[c,d]$的所有子区间的中位数的最大值.(强制在线) 这里的中位数定义为,对于一个长度为$n$的序列排 ...
    
			
    4. 
						
  4. docker+httpd的安装
			
    docker pull docker.io/httpd //直接这么运行会报“没有conf/httpd.cong这个文件” docker run -d --name httpd2. -p : -p : ...
    
			
    5. 
						
  5. Django配置相关及其它
			
    配置 模板 TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTemplates', 'DIRS': [ os.pat ...
    
			
    6. 
						
  6. freeswitch报错
			
    1.         2010-10-26 11:01:58.448513 [ERR] sofia_reg.c:816 Can not do authorization without a compl ...
    
			
    7. 
						
  7. oracle数据库导出与导入
			
    一.查询导出库的字符集 3个 1.查询oracle server端的字符集 SQL>select userenv('language') from dual; USERENV('LANGUAGE ...
    
			
    8. 
						
  8. Python基础(十一) 类继承
			
    类继承: 继承的想法在于,充份利用已有类的功能,在其基础上来扩展来定义新的类. Parent Class(父类) 与 Child Class(子类): 被继承的类称为父类,继承的类称为子类,一个父类, ...
    
			
    9. 
						
  9. fiddler学习总结--autoresponder替换资源
			
    意义:替换服务器返回的内容 1.找到需要替换的目标 2.选择目标后,点击“autoresponder”-->”add  rules” 3.在下图中,选择“find a file”,再选择需要替换 ...
    
			
    10. 
						
  10. WinSDK(菜单笔记)
			
    
			
    11.