<!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. IDEA--生成jar包并且导出jar包
			
    PS:首先在idea中新建一个java文件,且带有main方法(不带有main好像不能导出,不确定) 参考文章:http://www.cnblogs.com/blog5277/p/5920560.ht ...
    
			
    2. 
						
  2. 3.1.1 Spring 简介
			
    1. 概念 Spring是一个轻量级控制反转(IoC)和面向切面(AOP)的容器框架. IoC : Inversion of Control AOP : Aspect Oriented Program ...
    
			
    3. 
						
  3. 【Tools】-NO.89.Tools.4.Visual Studio 2017.1.001-【Visual Studio 2017 安装与卸载】-
			
    1.0.0 Summary Tittle:[Tools]-NO.89.Tools.4.Visual Studio 2017.1.001-[Visual Studio 2017 安装与卸载]- Styl ...
    
			
    4. 
						
  4. autoMapper的介绍
			
    .NET的DTO映射工具AutoMapper 分类: 多层架构 DTO .NET2012-08-11 10:27 2466人阅读 评论(0) 收藏 举报 原文:https://github.com/A ...
    
			
    5. 
						
  5. [ Build Tools ] Repositories
			
    仓库介绍 http://hao.jobbole.com/central-repository/ https://my.oschina.net/pingjiangyetan/blog/423380 ht ...
    
			
    6. 
						
  6. 200. Number of Islands(DFS)
			
    Given a 2d grid map of '1's (land) and '0's (water), count the number of islands. An island is surro ...
    
			
    7. 
						
  7. JAX-WS  使用maven创建
			
    maven 创建jar jar包依赖 <dependency> <groupId>junit</groupId> <artifactId>junit&l ...
    
			
    8. 
						
  8. 处理centos6或者7依赖关系（Nginx、MySQL、PHP）的方法
			
     yum -y install make gcc gcc-c++ gcc-g77 flex bison file libtool libtool-libs autoconf kernel-devel  ...
    
			
    9. 
						
  9. 剑指offer（3）从尾到头打印链表
			
    题目描述 输入一个链表,从尾到头打印链表每个节点的值. 题目分析 比较简单,主要注意下从尾到头,可以用栈可以用递归,我给出我比较喜欢的代码吧 代码 /* function ListNode(x){ t ...
    
			
    10. 
						
  10. Win10在右键菜单添加在此处打开命令窗口项
			
    转载:https://jingyan.baidu.com/article/2d5afd6930107a85a2e28e2d.html 第一步:新建一个文本文档,输入如下代码,然后另存为OpenCmdH ...
    
			
    11.