SASS 简单实用

<!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">
            版权 2010-2019
        </aside>
    </div>
    <!-- 子组合选择器和同层组合选择器：>、+和~;
    article section { margin: 5px }
    article > section { border: 1px solid #ccc }
    你可以用子组合选择器>选择一个元素的直接子元素。上例中，第一个选择器会选择article下的所有命中section选择器的元素。
    第二个选择器只会选择article下紧跟着的子元素中命中section选择器的元素。
    可以用同层相邻组合选择器+选择header元素后紧跟的p元素：header + p { font-size: 1.1em }
    你也可以用同层全体组合选择器~，选择所有跟在article后的同层article元素，不管它们之间隔了多少其他元素：article ~ article { border-top: 1px dashed #ccc } -->
    


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

    sass另外提供了一种不同于css标准注释格式/* ... */的注释语法，即静默注释，其内容不会出现在生成的css文件中。静默注释的语法跟JavaScriptJava等类C的语言中单行注释的语法相同，
    它们以//开头，注释内容直到行末。
    body {
      color: #333; // 这种注释内容不会出现在生成的css文件中
      padding: 0; /* 这种注释内容会出现在生成的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;
}

posted @ 2019-04-10 11:56 bingxiaoxiao 阅读(210) 评论(0) 收藏举报

bingxiaoxiao

zhangchenxiao

SASS 简单实用

公告