zoukankan      html  css  js  c++  java

  • SCSS 教程

    $ 的使用
    		 
    渲染效果
    		 
    $primary-color: #333;
    body {
  color: $primary-color;
}
     
    		 
    body {
  color: #333; }
    		 
    & 的使用，使用当前容器名称
    		   
    a {
  font-weight: bold;
  &:hover { text-decoration: underline; }
  body.firefox & { font-weight: normal; }
}


    #main {
  color: black;
      &-sidebar { border: 1px solid; }
  a {
    font-weight: bold;
    &:hover { color: red; }
  }
}
     
    		 
    a {
  font-weight: bold; }
  a:hover {
    text-decoration: underline; }
  body.firefox a {
    font-weight: normal; }

    #main {
  color: black; }
      #main-sidebar {
    border: 1px solid; }
    #main a { font-weight: bold; }
    
#main a:hover {
      color: red; }
     
     嵌套使用  
      
    nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }
}
    		   
    nav ul {
  margin: 0;
  padding: 0;
  list-style: none; }
nav li {
  display: inline-block; }
     导入scss文件  渲染后会合并
      
    //这是_reset.scss 的文件
html, body, ul, ol {
  margin:  0;
}


    // 这是 base.scss的文件
@import 'reset';
body {
  font: 100% Helvetica, sans-serif;
}


    		   
    html, body, ul, ol {
  margin: 0;}

body {
  font: 100% Helvetica, sans-serif; }
     @mixin 和 @include  
      
    @mixin border-radius($radius) {
          border-radius: $radius;
      -ms-border-radius: $radius;
}

.box {
  @include border-radius(10px);
}
    		   
    .box {
  border-radius: 10px;
  -ms-border-radius: 10px; }
      @extend 继承    
    // 下面代码会正常输出到生成的CSS文件，因为它被其接下来的代码所继承 
    %message-common {
  padding: 10px;
  color: #333;
}
    .message {
  @extend %message-common;
}
    .success { @extend %message-common; border-color: green; }
    		   
    .message, .success {
  padding: 10px;
  color: #333; }
    .success {
  border-color: green; }
     
    		 
    运算符，例如+、-、*、/、%
    		   
    div[role="main"] {
  width: 600px / 960px * 100%;
}
    		 
    div[role="main"] {
  width: 62.5%; }
     嵌套属性  
      
    .demo {
  // 命令空间后带有冒号:
  font: {
    family: fantasy;
    size: 30em;
  }
}
    		   
    .demo {
  font-family: fantasy;
  font-size: 30em; }
     嵌套属性2   
    .demo {
  font: 20px/24px fantasy {
    weight: bold;
  }
}
    		 
    .demo {
  font: 20px/24px fantasy;
    font-weight: bold;
}
  • 相关阅读:
    vue打包配置发布路径
    qt编程参考资料
    qt下载地址
    树结构遍历节点名字提取，这里提取的是el-tree数据结构，封装成函数
    set实现数组去重后是对象，这里转化为数组
    js中的async await
    微信小程序调微信支付
    Http权威指南（TCP连接）
    Http权威指南（报文）
    Http权威指南（概述篇总结）
  • 原文地址：https://www.cnblogs.com/developer-ios/p/12084964.html
Copyright © 2011-2022 走看看