zoukankan      html  css  js  c++  java
  • sass预编译器

    突然间就不怎么想用博客写笔记了,想改用有道云笔记

    sass

    1 sass是一个css的预编译程序, 是基于 ruby 的
    2 先要去安装 ruby
    3 在命令行中, 执行以下两句代码(安装sass的), 连网操作的
    gem install sass
    gem install compass
    sass安装的文档 https://www.sass.hk/install/

    sass的编译工具

    Koala: 不支持中文路径的文件夹
    把文件夹放到一个英文的路径下面
    把项目文件夹拖入到kaola里, 就可以找到sass文件, 选中它, 执行编译,就可以在css文件中, 生成正确的 css文件
    在开发过程中, 要全程打开 koala, 每一次保存scss文件,都会自动编译
    在开发中, 如果使用sass, 就不要直接去修改css了

    kaola在编译sass时的输出方式

    1 nested: 编译出缩进的css
    2 expended: 编译出平时我们看到的css的格式(在开发过程中使用)
    3 compact: 将每个dom元素的css放在一行
    4 compressed: 输出一个压缩版的css(项目上线之前使用)

    Sass的基本使用

    // 使用 import 进行合并
    @import 'base.scss';
    
    /* 支持 css的 注释 会被编译过去 */ 
    
    // 也支持这种 注释 不会被编译
    
    // 支持原生的 css写法
    body{
      background-color: skyblue;
      color:hotpink;
    }
    
    // 支持嵌套写法 
    body{
      header{
        background-color: hotpink;
        div{
          color:skyblue;
          a{
            display: block;
          }
        }
      }
    
      // body添加伪元素 
      // 如果想要去掉生成的空格
      &::before{
        content:'';
      }
    
      // 子代元素 
      >.nav{
        background-color: hotpink;
      }
    }
    
    // 颜色的使用有多次
    // 变量定义 : 赋值
    $westFlowerGreen:hotpink;
    $minWidth:100px;
    
    
    .show-box{
      background-color: $westFlowerGreen;
      $minWidth;
      height: $minWidth*2;
      border- $minWidth - 30px;
      transform: translateX(100px);
    }

     Sass的高级语法

    // 定义混入 @mixin 关键字
    @mixin setSize($width,$height){
      $width;
      height:$height;
    }
    
    // 使用混入 @include 关键字
    body{
      @include setSize(200px,300px);
    }
    // 一些 样式类似 但是值不同的 代码 抽取出来
    
    // 单独封装算法 可以使用 
    // 函数来实现
    // 在关键字的前面需要添加@
    @function bigger($size){
      @return $size*2;
    }
    
    div{
      // 使用的使用 跟 调用js的方法 十分类似
      bigger(100px);
      height: bigger(200px);
      font-size:bigger(10px);
    }

  • 相关阅读:
    html5-本地数据库的操作
    html5_storage存取实例
    html5-表单常见操作
    js操作注意事项
    php扩展地址下载
    php serialize序列化对象或者数组
    php_memcahed 使用方法
    php_memcahed telnet远程操作方法
    php_memcahed 安装
    Liunx centos 系统 修改hostname
  • 原文地址:https://www.cnblogs.com/DZzzz/p/8989947.html
Copyright © 2011-2022 走看看