sass04 嵌套、继承、占位符

demo1.scss

body{    //选择器嵌套
    background-color:lightgray;
    header{
        background-color:lightgreen;
    }
    footer{
        background:{ //属性嵌套,仅仅对中划线样式有效
            color:red;
            size:100% 50%;
        }
    }
    a {
        color:red;
        &:hover{   //引用父选择器,& = a
            color:blue;
        }
        & span{
            color:green;
        }
        &.content{
            color:green;
        }
    }
    @at-root .container{  //跳出body
        width:996px;
    }
    @media screen and (max-width:600px){
        color:red;  //屏幕600以下使用这个样式
    }

    @media screen and (max-width:600px){
        @at-root (without:media){
            .container{
                color:red;  //屏幕600以下使用这个样式
            }
        }
    }

    @at-root .text-info{
        color:red;
        @at-root nav &{
            color:blue;
        }
    }
}
.alert{
    background-color:#FFEEDD;
}
.s{
    font-size:12px;
}
.alert-info{
    @extend .alert,.s;  //继承
    color:red;
}

.one{
    border:1px solid red;
}
.two{
    @extend .one;
    color:red;
}
.three{
    @extend .two;//链式继承
    boder:1px;
}

//交叉继承,会出现错误
a span{
    font-weight:blod;
}
div .content{
    @extend span;
}

%abc{   //占位符,没人继承他不会编译到css,有人继承也不会编译他自己,别人继承的会编译
    color:blue;
}
.ws{
    @extend %abc;
}

/*
默认@at-root只会跳出选择器嵌套,而不能跳出@media或@support,如果要跳出这两种,则需使用@at-root (without: media),@at-root (without: support)。这个语法的关键词有四个:all(表示所有),rule(表示常规css),media(表示media),support(表示support,因为@support目前还无法广泛使用,所以在此不表)。我们默认的@at-root其实就是@at-root (without:rule)。

虽然能继承的选择器数量很多,但也有很多是不被支持的。如包含选择器(.one .two)或者是相邻兄弟选择器(.one+.two)
如果继承的元素是a,恰巧这个元素a又有hover状态的形式,那么hover状态也会被继承

占位选择器%:优势在于:如果不调用则不会有任何多余的css文件,避免了以前在一些基础的文件中预定义了很多基础的样式,然后实际应用中不管是否使用了@extend去继承相应的样式,都会解析出来所有的样式。占位选择器以%标识定义,通过@extend调用。
*/

demo1.css

@charset "UTF-8";
body {
  background-color: lightgray;
}
body header {
  background-color: lightgreen;
}
body footer {
  background-color: red;
  background-size: 100% 50%;
}
body a {
  color: red;
}
body a:hover {
  color: blue;
}
body a span, body a div .content, div body a .content {
  color: green;
}
body a.content {
  color: green;
}
.container {
  width: 996px;
}
@media screen and (max-width: 600px) {
  body {
    color: red;
  }
}
body .container {
  color: red;
}

.text-info {
  color: red;
}
nav .text-info {
  color: blue;
}

.alert, .alert-info {
  background-color: #FFEEDD;
}

.s, .alert-info {
  font-size: 12px;
}

.alert-info {
  color: red;
}

.one, .two, .three {
  border: 1px solid red;
}

.two, .three {
  color: red;
}

.three {
  boder: 1px;
}

a span, a div .content, div a .content {
  font-weight: blod;
}

.ws {
  color: blue;
}
时间: 2024-10-11 03:36:33

sass04 嵌套、继承、占位符的相关文章

sass 继承 占位符 %placeholder

@extend //SCSS .btn { border: 1px solid #ccc; padding: 6px 10px; font-size: 14px; } .btn-primary { background-color: #f36; color: #fff; @extend .btn; } .btn-second { background-color: orange; color: #fff; @extend .btn; } 编译出来的css //CSS .btn, .btn-pri

Sass 混合宏、继承、占位符 详解

混合宏-声明混合宏如果你的整个网站中有几处小样式类似,比如颜色,字体等,在 Sass 可以使用变量来统一处理,那么这种选择还是不错的.但当你的样式变得越来越复杂,需要重复使用大段的样式时,使用变量就无法达到我们目了.这个时候 Sass 中的混合宏就会变得非常有意义.1.声明混合宏不带参数混合宏:在 Sass 中,使用"@mixin"来声明一个混合宏.如: 1 @mixin border-radius{ 2 -webkit-border-radius: 5px; 3 border-rad

Sass之继承,混合宏,占位符的用法总结

Sass强大的功能,受到web前端开发人员的各种青睐. 混合宏的用法,关键字@mixin,声明带参数的函数,在有需要的地方通过@include调用这一函数值 //SCSS中混合宏使用@mixin mt($var){ margin-top: $var; } .block { @include mt(5px); span { display:block; @include mt(5px); }} .header { color: orange; @include mt(5px); span{ dis

sass学习笔记(四):混合宏VS继承VS占位符

混合宏主要用来传递参数,但sass编译相同的混合宏时,不会将相同的样式合并.会产生冗余代码. 继承主要用于不需要传递参数的场合,且已经存在基类,编译后会将相同的样式合并,不足:不论基类是否被调用,已经声明的基类都会产生代码. 占位符与继承类似,但是没有被调用的占位符不会产生代码.

Sass之混合宏、继承、占位符

1.混合宏. 当样式变得越来越复杂,需要重复使用大段的样式时,使用变量就无法达到我们目的了.这个时候混合宏就派上用场了. 而使用混合宏时,首先要声明混合宏,而声明混合宏时有两种,不带参数混合宏和带参数混合宏两种. 1.1 不带参数混合宏的声明要使用关键词@mixin.例如: @mixin border-radius{ -webkit-border-radius: 5px; border-radius: 5px; } 其中 @mixin 是用来声明混合宏的关键词,有点类似 CSS 中的 @medi

c++11模拟boost中元占位符

准备实现meta programming的fold函数,发现自己缺少占位符实现,这样传入fold的transform op类(元函数)都不得不另外写个外覆类,其实我觉得没啥不好,简单直接,说实话干扰什么的没那么严重,一个功能块里能用fold的地方能有几次?但动了占位符这个念头,就想尝试实现一下. 看一下实际情景: template<typename TList, typename Init, class TransformOp> struct fold_s {}; 我们可能会希望把push_b

为什么占位符可以防止sql注入?

先看下面用占位符来查询的一句话 String sql = "select * from administrator where adminname=?"; psm = con.prepareStatement(sql); String s_name ="zhangsan' or '1'='1"; psm.setString(1, s_name); 假设数据库表中并没有zhangsan这个用户名, 用plsql运行sql语句,可以查出来所有的用户名,但是在Java中并

占位符行为 PlaceHolderBehavior 的实现以及使用

这个效果我不太会描述 PlaceHolder直译占位符 也有人把这个效果叫水印效果 就是和HTML5的PlaceHolder属性一样的效果 上图直观: 使用方法: 首先下载 占位符行为dll.rar 在项目中引用dll 1.在VS中 引用System.Windows.Interactivity.dll程序集 在xmal页面添加引用: 然后附加到TextBox 设置行为的属性 Text值肯定是要设置的了,这个是提示的文字.然后按需设置其他属性.不设置的话,默认取被附加的TextBox的值. 2.在

打造一个支持占位符的多行文本输入框

前言 众所周知,在iOS开发中,UIKit提供的文本输入框有两种:UITextField和UITextView.前者支持站位付,但不支持多行输入,后者支持多行输入,但不支持占位符.而在实际开发过程中经常须要使用到既能支持多行输入,又能支持占位符的文本输入框,这就必须自己实现了.我在须要使用的时候也在网上找了一些别人写的,但是,说真的,没找到好用的,并且看他们的源码实现过程还较为复杂.所以就自己写了一个. 开发思路 这是一个很简单的东西,就不在此详细介绍实现的过程,代码已经上传到github,支持