精华内容
下载资源
问答
  • SCSS语法

    2020-08-13 13:33:35
    // scss #id { color: red; .name { color: blue; .child { color: yellow; } } } // css #id { color: red; } #id .name { color: blue; } #id .name .child { color: yellow; } 引用父选择器 & ...

    嵌套规则

    // scss
    #id {
        color: red;
        .name {
            color: blue;
            .child {
                color: yellow;
            }
        }
    }
    
    // css
    #id {
        color: red;
    }
    
    #id .name {
        color: blue;
    }
    
    #id .name .child {
        color: yellow;
    }
    

    引用父选择器 &

    // scss
    .btn {
        background-color: #fff;
        &.active {
            background-color: red;
        }
        &:hover {
            background-color: blue;
        }
        &:visited {
            background-color: yellow;
        }
        &-success {
            background-color: pink;
        }
    }
    
    // css
    .btn {
        background-color: #fff;
    }
    
    .btn.active {
        background-color: red;
    }
    
    .btn:hover {
        background-color: blue;
    }
    
    .btn:visited {
        background-color: yellow;
    }
    
    .btn-success {
        background-color: pink;
    }
    

    嵌套属性规则

    // scss
    .attr {
        font: {
            family: fantasy;
            size: 1.2em;
            line-hight: 1.4;
        };
        border: {
            radius: 20px;
            color: blue;
        };
    }
    
    // css
    .attr {
        font-family: fantasy;
        font-size: 1.2em;
        font-line-hight: 1.4;
        border-radius: 20px;
        border-color: blue;
    }
    

    运算

    声明变量

    // scss
    $width: 50px;
    
    .wt {
        width: $width;
    }
    
    // css
    .wt {
        width: 50px;
    }
    

    数学运算

    // scss
    #id {
        width: (1 + 2) *3px;
    }
    
    // css
    #id {
        width: 9px;
    }
    
    特殊的 / 除法运算符
    // scss
    p {
      font: 10px/8px;             // 纯 CSS,不是除法运算
      $width: 1000px;
      width: $width/2;            // 使用了变量,是除法运算
      width: round(1.5px)/2;        // 使用了函数,是除法运算
      height: (500px/2);          // 使用了圆括号,是除法运算
      margin-left: 5px + 8px/2px; // 使用了加(+)号,是除法运算
      padding-left: + 100px / 2;  
    }
    
    // css
    p {
        font: 10px/8px;
        width: 500px;
        width: 1px;
        height: 250px;
        margin-left: 9px;
        padding-left: 50px;
    }
    

    scss为了兼容IE8,10px/8px不能种的 /不能编译为除法运算符,可以在除法运算前使用+运算符创建命名空间

    颜色运算符

    // scss
    p {
      color: #001100 + #040506;
    }
    p {
      color: #010 + #040506;
    }
    
    // css
    p {
        color: #041606;
    }
    
    p {
        color: #041606;
    }
    

    插值 #{}

    // scss
    $name: foo;
    $attr: border;
    p.#{$name} {
      #{$attr}-color: blue;
    }
    
    p {
      $font-size: 12px;
      $line-height: 30px;
      font: #{$font-size}/#{$line-height};
    }
    
    // css
    p.foo {
        border-color: blue;
    }
    
    p {
        font: 12px/30px;
    }
    

    插值内的计算,null为空字符串

    // scss
    p:before {
        content: 'string #{1+2} str';
    }
    $val: null;
    p:before {
        content: 'sting #{$val} str';
    }
    
    // css
    p:before {
        content: "string 3 str";
    }
    
    p:before {
        content: "sting  str";
    }
    

    SCSS 指令

    import导入

    import 可以导入style.scss的样式到当前文件下

    // scss
    @import 'style.scss';
    

    import 指令支持嵌套

    // scss
    .warp {
      @import 'style.scss';
    }
    

    media 媒体查询

    // scss
    $media: screen;
    $feature: -webkit-min-device-pixel-ratio;
    $value: 1.5;
    .father{
        .sidebar {
            width: 800px;
        }
        @media #{$media} and ($feature: $value) {
          height: 300px;
          .sidebar {
            width: 500px;
          }
          .hello {
              color: red;
          }
        }
    }
    
    // css
    .father .sidebar {
        width: 800px;
    }
    
    @media screen and (-webkit-min-device-pixel-ratio: 1.5) {
        .father {
            height: 300px;
        }
    
        .father .sidebar {
            width: 500px;
        }
    
        .father .hello {
            color: red;
        }
    }
    

    extend 继承

    extend 只能继承选择器

    // scss
    .error {
      border: 1px #f00;
      background-color: #fdd;
      &.intrusion {
          background-image: url("/image/hacked.png");
        }
    }
    
    .seriousError {
      @extend .error;
      border-width: 3px;
    }
    
    // css
    .error, .seriousError {
        border: 1px #f00;
        background-color: #fdd;
    }
    
    .error.intrusion, .intrusion.seriousError {
        background-image: url("/image/hacked.png");
    }
    
    .seriousError {
        border-width: 3px;
    }
    

    extend继承选择器的相关性

    // scss
    .hoverlink {
      @extend a:hover;
    }
    
    a:hover {
      text-decoration: underline;
    }
    
    .comment a.user:hover { // a.user:hover 和a:hover 有相关性,同样被继承 
      font-weight: bold;
    }
    
    .comment a .user:hover { // a .user:hover 与a:hover 无相关性,不被继承
      color: red;
    }
    
    // css
    a:hover, .hoverlink {
        text-decoration: underline;
    }
    
    .comment a.user:hover, .comment .user.hoverlink {
        font-weight: bold;
    }
    
    .comment a .user:hover {
        color: red;
    }
    

    extend的多次继承

    // scss
    .error {
      border: 1px #f00;
      background-color: #fdd;
    }
    .attention {
      font-size: 3em;
      background-color: #ff0;
    }
    .seriousError {
      @extend .error;
      @extend .attention;
      border-width: 3px;
    }
    
    // csss
    .error, .seriousError {
        border: 1px #f00;
        background-color: #fdd;
    }
    
    .attention, .seriousError {
        font-size: 3em;
        background-color: #ff0;
    }
    
    .seriousError {
        border-width: 3px;
    }
    

    extend的链式继承

    // scss
    .error {
      border: 1px #f00;
      background-color: #fdd;
    }
    .seriousError {
      @extend .error;
      border-width: 3px;
    }
    .criticalError {
      @extend .seriousError;
      position: fixed;
      top: 10%;
      bottom: 10%;
      left: 10%;
      right: 10%;
    }
    
    // css
    .error, .seriousError, .criticalError {
        border: 1px #f00;
        background-color: #fdd;
    }
    
    .seriousError, .criticalError {
        border-width: 3px;
    }
    
    .criticalError {
        position: fixed;
        top: 10%;
        bottom: 10%;
        left: 10%;
        right: 10%;
    }
    

    mixin + include混合

    mixin 混合属性

    // scss
    @mixin large-text {
      font: {
        family: Arial;
        size: 20px;
        weight: bold;
      }
      color: #ff0000;
    }
    
    .page-title {
      @include large-text;
      padding: 4px;
      margin-top: 10px;
    }
    
    // css
    .page-title {
        font-family: Arial;
        font-size: 20px;
        font-weight: bold;
        color: #ff0000;
        padding: 4px;
        margin-top: 10px;
    }
    

    mixin 在外层混合, 不依赖于父层结构

    // scss
    @mixin silly-links {
      a {
        color: blue;
        background-color: red;
      }
    }
    
    @include silly-links;
    
    // css
    a {
        color: blue;
        background-color: red;
    }
    

    mixin 设置参数

    // scss
    @mixin sexy-border($color, $width) {
      border: {
        color: $color;
        width: $width;
        style: dashed;
      }
    }
    
    p { @include sexy-border(blue, 1in); }
    
    // css
    p {
        border-color: blue;
        border-width: 1in;
        border-style: dashed;
    }
    

    mixin 混合未知格式和数量的变量, 使用arg…

    // scss
    @mixin box-shadow($shadows...) {
      -moz-box-shadow: $shadows;
      -webkit-box-shadow: $shadows;
      box-shadow: $shadows;
    }
    
    .shadows {
      @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
    }
    
    // css
    .shadows {
        -moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
        -webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
        box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
    }
    

    也可以使用插值编写,不过mixin和include指定的是一个不会进行动态识别的字面量不能使用插值

    // scss
    $b: box-shadow;
    @mixin box-shadow($shadows...) {
      -moz-#{$b}: $shadows;
      -webkit-#{$b}: $shadows;
      #{$b}: $shadows;
    }
    
    .shadows {
      @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
    }
    
    // css
    .shadows {
        -moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
        -webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
        box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
    }
    

    mixin 的复合 mixin内部也可以include

    // scss
    @mixin compound {
      @include highlighted-background;
      @include header-text;
    }
    
    @mixin highlighted-background { background-color: #fc0; }
    @mixin header-text { font-size: 20px; }
    
    .com {
        @include compound;
    }
    
    // css
    .com {
        background-color: #fc0;
        font-size: 20px;
    }
    

    SCSS 流程控制指令

    if 条件语句

    // scss
    p {
      @if 1 + 1 == 2 { border: 1px solid;  }
      @if 5 < 3      { border: 2px dotted; }
      @if null       { border: 3px double; }
    }
    
    // css
    p {
        border: 1px solid;
    }
    

    else if 语句

    // scss
    $type: monster;
    p {
      @if $type == ocean {
        color: blue;
      } @else if $type == matador {
        color: red;
      } @else if $type == monster {
        color: green;
      } @else {
        color: black;
      }
    }
    
    // css
    p {
        color: green;
    }
    

    for 循环语句

    // scss
    @for $i from 1 through 3 {
      .item-#{$i} { width: 2em * $i; }
    }
    
    // css
    .item-1 {
        width: 2em;
    }
    
    .item-2 {
        width: 4em;
    }
    
    .item-3 {
        width: 6em;
    }
    

    each 循环语句

    // scss
    @each $animal in puma, sea-slug, egret, salamander {
      .#{$animal}-icon {
        background-image: url('/images/#{$animal}.png');
      }
    }
    
    // css
    .puma-icon {
        background-image: url("/images/puma.png");
    }
    
    .sea-slug-icon {
        background-image: url("/images/sea-slug.png");
    }
    
    .egret-icon {
        background-image: url("/images/egret.png");
    }
    
    .salamander-icon {
        background-image: url("/images/salamander.png");
    }
    

    while循环语句

    // scss
    $i: 6;
    @while $i > 0 {
      .item-#{$i} { width: 2em * $i; }
      $i: $i - 2;
    }
    
    // css
    .item-6 {
        width: 12em;
    }
    
    .item-4 {
        width: 8em;
    }
    
    .item-2 {
        width: 4em;
    }
    
    展开全文
  • scss语法

    2019-06-21 10:37:42
    scss 2019 scss 是一种动态css 语言 混合宏 继承 占位符 嵌套 Class中嵌套class,从而减少重复的代码 运算 CSS中用上数学表达式 颜色功能 可以编辑颜色 名字空间(namespace) 分组样式,从而可以被调用 ...

    scss 2019 

    scss 是一种动态css 语言

    1. 混合宏
    2. 继承
    3. 占位符
    4. 嵌套  Class中嵌套class,从而减少重复的代码
    5. 运算  CSS中用上数学表达式
    6. 颜色功能 可以编辑颜色
    7. 名字空间(namespace) 分组样式,从而可以被调用
    8. 作用域 局部修改样式
    9. JavaScript 赋值 在CSS中使用JavaScript表达式赋值


    和less区别

    1. 变量在Less和Sass中的唯一区别就是Less用@,Sass用$
    2. Less是基于JavaScript 实现的,是在客户端处理的
    3. Sass是基于Ruby实现的,是在服务器端处理的

    注释(less-js)

    // 但这种不会被编译的注释
    /*会被编译的注释*/


    数据类型


    scss 2012

    scss  是一种编写css 的预编译器 

    1. 嵌套  简化 css 代码量
    2. 选择器  &父选择器
    3. 命名空间
    4. 定义变量  $开头定义 css 全局变量
    5. 插值语法   #{$attr}
    6. 继承 @extend
    <style lang="scss" scoped>
        @import "~@assets/styles/define.scss";
    </style>
    /* 
    嵌套:内层的样式将它外层的选择器作为父选择器
    */
    .sign {
        * {
            user-select: none;
            outline: none;
          }
    }
    /*
    父选择器&:用 & 代表嵌套规则外层的父选择器
    || .sign-container-form .item-code{}
    */ 
    .sign-container-form {
      .item {
        &-code { input{width: 221px;}}
      }
    }
    /*
    css 命名空间管理
    font-family
    font-size
    font-weight
    */ 
    .funky {
      font: 20px/24px {
        family: fantasy;
        size: 30em;
        weight: bold;
      }
    }
    /*
    Sass 额外提供了一种特殊类型的选择器:占位符选择器
    必须通过 @extend 指令调用
    */ 
    /*
    变量 $ 
    嵌套规则内定义的变量只能在嵌套规则内使用(局部变量),
    不在嵌套规则内定义的变量则可在任何地方使用(全局变量)
    将局部变量转换为全局变量可以添加 !global 声明
    */ 
    /*
    数据类型
    数字,1, 2, 13, 10px
    字符串,有引号字符串与无引号字符串,"foo", 'bar', baz
    颜色,blue, #04a3f9, rgba(255,0,0,0.5)
    布尔型,true, false
    空值,null
    数组 (list),
    用空格或逗号作分隔符,1.5em 1em 0
    2em, Helvetica, Arial, sans-serif
    maps, 
    相当于 JavaScript 的 object,(key1: value1, key2: value2)
    */ 
    /*
    SassScript 支持数字的加减乘除、取整等运算
    (+, -, *, /, %)
    */ 
    /*
    插值语句 #{}
    */ 
    $name: foo;
    $attr: border;
    p.#{$name} {
      #{$attr}-color: blue;
    }
    /*
    一个元素使用的样式与另一个元素完全相同,但又添加了额外的样式
    @extend 继承
    */ 
    .error {
      border: 1px #f00;
      background-color: #fdd;
    }
    .seriousError {
      @extend .error;
      border-width: 3px;
    }


      
       


    参考链接

    http://www.ruanyifeng.com/blog/2012/06/sass.html  2012 年教程

    https://blog.csdn.net/Ginny_2017/article/details/100007285   2019 年
       

    展开全文
  • scss 语法

    2018-12-06 11:58:00
    scss在项目中使用方便,简洁~ 1.定义变量 $color:red; .box{ background-color:$color; } 2.嵌套css #content{ div{ aside{ background-color: red; } h1...

    scss在项目中使用方便,简洁~

    1.定义变量

    $color:red;
    .box{
            background-color:$color;        
    }

    2.嵌套css

    #content{
        div{
            aside{
                background-color: red;
            }
            h1{
                color: green;
            }
        }
    }
    

    3.父选择器标识符

    #content{
        div{
            aside{
                background-color: red;
            }
            a{
                color: red;
                &:hover{
                    color: blue;
                }
            }
    
        }
    }
    

    4.嵌套属性

    nav{
        border{
            width:1px;
            style:solid;
            color:red;
        }
    }
    

    5.混合

       先定义要混合的样式:@mixin

    @mixin corners{
        -moz-border-radius:2px;
        -webkit-border-radius:2px;
        border-radius:2px;
    }
    

      使用:@include

    div{
        width: 200px;
        height: 100px;
        @include corners;
    }
    

    6.继承

    .error {
      border: 1px solid red;
      background-color: #fdd;
    }
    .seriousError {
      @extend .error;
      border-width: 3px;
    }
    

    7.函数的使用

    $fontSize:37.5;
    @function px3rem($px){
           @return  ($px/$fontSize) +rem ;
    }
    

    8.控制指令

    if

    p {
      @if 1 + 1 == 2 { border: 1px solid; }
      @if 5 < 3 { border: 2px dotted; }
      @if null  { border: 3px double; }
    }

    for

    @for $i from 1 through 3 {
      .item-#{$i} { width: 2em * $i; }
    }
    

    9.导入文件

    @import 'reset';
    

    10.注释

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

     以上为sass的基础语法,详细内容请参考https://www.sass.hk/网站。

    转载于:https://www.cnblogs.com/amy2017/p/10075951.html

    展开全文
  • SCSS 语法

    2019-04-29 18:07:13
    Sass是CSS预处理器,引入了变量、嵌套、mixin(混合)、运算以及函数等功能,且完全兼容 CSS 语法。 优点: 完全兼容 CSS3 在 CSS 语言基础上添加了扩展功能,比如变量、嵌套 (nesting)、混合 (mixin) 通过函数进行...

    前言:Sass是CSS预处理器,引入了变量、嵌套、mixin(混合)、运算以及函数等功能,且完全兼容 CSS 语法,而SCSS是Sass3版本当中引入的新语法特性。

    优点:

    • 完全兼容 CSS3
    • 在 CSS 语言基础上添加了扩展功能,比如变量、嵌套 (nesting)、混合 (mixin)
    • 通过函数进行颜色值与属性值的运算
    • 函数库控制指令之类的高级功能
    • 自定义输出格式
    • 有无数的框架使用Sass构建
    • 助于更好地组织管理样式文件,以及更高效地开发项目

    语法

    一、自定义变量

    • 属性值
    $color:pink;
    .test1{
        background-color:$color;
    }
    
    • 属性
    $right:right;
    .test2{
        border-#{$right}:1px solid #000;
    }
    

    二、嵌套

    • 嵌套元素
    #sidebar {
      a { text-decoration: none; }
    }
    
    • 嵌套属性
    #footer {
      border: {
        width: 1px;
        color: #ccc;
        style: solid;
      }
    }
    

    三、引用父选择符 &

    • 例如,在该选择器悬停时或者当body元素具有某个类时具有特殊样式。
    • 无论css如何嵌套多少层次,& 在编译时都会替换为父选择符,以下代码&始终解析为a标签
    .box{
    	a {
    	  text-decoration: none;
    	  &:hover { text-decoration: underline; }
    	}
    }
    

    编译后:

    .box a {
      text-decoration: none; 
    }
    a:hover {
      text-decoration: underline; 
    }
    

    四、混入mixin

    • 用于定义可重复使用的样式,使用@mixin指令声明mixin :
    @mixin rounded($amount) {
      -moz-border-radius: $amount;
      -webkit-border-radius: $amount;
      border-radius: $amount;
    }
    
    • mixin与@include指令一起使用:
    .box {
      border: 3px solid #777;
      @include rounded(0.5em);
    }
    

    五、导入import

    @import则会直接将这些引入的片段合并至当前CSS文件,并且不会产生新的请求

    @import "themes/dark";
    @import "font.sass";
    

    六、继承extend

    复用css属性,简化代码
    单个选择器可以多个选择器t继承了所有扩展选择器的样式

    .test{
      border: 1px #f00;
      background-color: #fdd;
    }
    .box{
      @extend .test;
      border-width: 3px;
    }
    

    七、运算

    • css中也可以使用算术运算符 ‘+’、‘-’、‘*’、‘/’、‘%’等
    • 所有算数运算都支持颜色值, 并且是分段运算的。 也就是说,红、绿、蓝各颜色分量会单独进行运算
    .box{
      width: 600px / 960px * 100%;
      color: #010203 + #040506;
    }
    

    注意:除法 ‘/’,出现在属性值里,作为分隔数字的一种方法,在以下几种情况下才会被编译为除法。

    .box{
      font: 10px/8px;             // 纯 CSS,不是除法运算
      $width: 1000px;
      width: $width/2;            // 使用了变量,是除法运算
      width: round(1.5)/2;        // 使用了函数,是除法运算
      height: (500px/2);          // 使用了圆括号,是除法运算
      margin-left: 5px + 8px/2px; // 使用了加(+)号,是除法运算
    }
    
    

    八、控制指令

    跟js语法相近

    • @if
    $num:5;
    .box {
      @if num == 2 { border: 1px solid; }
      @if num < 3 { border: 2px dotted; }
      @if null  { border: 3px double; }
    }
    
    • @for

    语法:@for $var from < start> through < end> 或 @for $var from < start> to < end>
    through 包含开头到结尾的值,to 不包括结尾的值

    @for $i from 1 through 3 {
      .txt-#{$i} { font-size: 12px * $i; }
    }
    

    编译为

    .txt-1 {
      width: 12px; }
    .txt-2 {
      width: 24px; }
    .txt-3 {
      width: 36px; }
    
    • @each
    @each $iconName in car, phone, date {
      .#{$iconName}-icon {
        background-image: url('/images/#{$iconName }.png');
      }
    }
    

    编译为

    .car-icon {
      background-image: url('/images/car.png'); }
    .phone-icon {
      background-image: url('/images/phone.png'); }
    .date-icon {
      background-image: url('/images/date.png'); }
    
    展开全文

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,544
精华内容 617
关键字:

scss语法