css--预处理器&&skill

note_byte
212 阅读4分钟

css预处理器

作用：

  • 嵌套：   反应层级和约束
  • 变量和计算 减少重复代码
  • extend 和mixin代码片段
  • 循环      适用于复杂有规律的样式
  • import   CSS 文件模块化

嵌套------------------无差异

less------- 后缀.less

.wrapper{
    background:white;
    .nav{
        font-size:12px;
    }
    .content{
        font-size:14px;
        &.hover{
            background:red;
        }
    }
}

sass嵌套-------   后缀.scss

.wrapper{
    background:white;
    .nav{
        font-size:12px;
    }
    .content{
        font-size:14px;
        &.hover{
            background:red;
        }
    }
}

变量------------------差异less用@-----sass用$

less

@bgColor:green;
@fontSize:16px

.wrapper{
    background:lighten(@bgColor,40%);
    .nav{
        font-size:@fontSize;
    }
    .content{
        font-size:@fontSize + 2px;
        &.hover{
            background:red;
        }
    }
}

sass

$bgColor:green;
$fontSize:16px

.wrapper{
    background:lighten($bgColor,40%);
    .nav{
        font-size:$fontSize;
    }
    .content{
        font-size:$fontSize + 2px;
        &.hover{
            background:red;
        }
    }
}

mixin------------样式表中对样式复用

less

@bgColor:green;
@fontSize:16px

.block(@fontSize){
    font-size:@fontSize;
    border: 1px solid #ccc;
    border-radius:4px;
}

.wrapper{
    background:lighten(@bgColor,40%);      
    .nav{
        .block(@fontSize);                   //复用
    }
    .content{
        .block(@fontSize + 2px);             //复用
        &.hover{
            background:red;
        }
    }
}

sass

$bgColor:green;
$fontSize:16px
 
@mixin block($fontSize){                            //区别：加@mixin，无 .
    font-size:$fontSize;
    border: 1px solid #ccc;
    border-radius:4px;
}

.wrapper{
    background:lighten($bgColor,40%);               
    .nav{
        @include block(@fontSize);                    //区别：加@include
    }
    .content{
        @include block($fontSize + 2px);              //区别：加@include
        &.hover{
            @include  background:red;
        }
    }  
}

extend

less

@bgColor:green;
@fontSize:16px

.block{
    font-size:@fontSize;
    border: 1px solid #ccc;
    border-radius:4px;
}
body{
    padding:0;
    margin:0;
}
.wrapper{
    background:lighten(@bgColor,40%);      
    .nav:extend(.block){                           //复用
    }
    .content:extend(.block){                       //复用
            //&:extend(.block)        
            &:hover{
            background:red;
        }
    }
}

sass

$fontSize: 12px;
$bgColor: red;

.block{
    font-size: $fontSize;
    border: 1px solid #ccc;
    border-radius: 4px;
}

body{
    padding:0;
    margin:0;
}

.wrapper{
    background:lighten($bgColor, 40%);

    .nav{
        @extend .block;                     //区别@extend
        color: #333;
    }
    .content{
        @extend .block;
        &:hover{
            background:red;
        }
    }
}

loop

less

.gen-col(@n) when (@n > 0){
    .gen-col(@n - 1);
    .col-@{n}{
        width: 1000px/12*@n;
    }
}
.gen-col(12);

sass          

 // @mixin gen-col($n){
//     @if $n > 0 {
//         @include gen-col($n - 1);
//         .col-#{$n}{
//             width: 1000px/12*$n;
//         }
//     }
// }

// @include gen-col(12);


@for $i from 1 through 12 {               //sass支持循环
    .col-#{$i} {
        width: 1000px/12*$i;
    }
}

import  模块化

less

@import "./6-import-variable";
@import "./6-import-module1";
@import "./6-import-module2";

sass

@import "./6-import-variable";
@import "./6-import-module1";
@import "./6-import-module2";


css预处理框架

  • SASS-Compass
  • Less-Lesshat/EST
  • 提供现成的mixin
  • 类似JS类库 封装常用功能


--------------------------------------------------------------------------


all in all

有学习成本，会用一个熟练的就行，我用stylus    <_<


---------------------------------------------------------------------------

css

overflow-wrap:normal;
word-break:normal;        //中日韩      ||keep-all
      

white-space:no-wrap;     //不换行

font-weight:粗细               bold|normal|lighter
text-decoration:下划线      
cursor:指针                        point

权重

  • !important   这货权重最高
  • 内联样式  优先级高
  • 雪碧图：位置来定位显示

base64：图片变成文本的一种方式，内嵌中css中

  • 体积会变大
  • 请求变少

伪类伪元素

  • 伪类表状态              //  :hover
  • 伪元素真的有元素    //  ::after


checkbox 优化

.checkbox input+label{
background:url(../123.png) left center  no-repeat;
}


<input type="checkbox" id="handsome">
<label for="handsome" >写点啥显示出来</label>


布局

table
float+margin
inline-block
flexbox

display:

  • inline
  • inline-block
  • block

position

  • static
  • relative
  • absolute 脱离文档流，必须写明高度
  • faixed


float

脱离文档流，但不脱离文字流（不遮文字，图文混排）float:left/right/bottom/top

形成BFC“块”。

  • 对兄弟元素影响。上面贴非float元素、旁边贴float元素，
  • 对父级元素的影响。高度塌陷
  • 兼容性好，使用地方多

处理方法：父级尾元素处理

.container2::after{
    content:''
    clear:both;  //保证这个元素的左右两边都是干净的
    display:block;
    height:0px;
    visiblity:false;
}

常用操作：左右都float先布局好，后设置margin布局右面


flexbox弹性盒子

display：flex
flex：1//平分，自适应

width：50px//固定
flex：none


inline-block

display：inline-block

需要处理间隙问题 ，父类font-size=0做处理。


响应式布局

设计：隐藏+折行+自适应空间

rem/viewport/media query

  • rem：根据html字体大小，来确定元素大小
  • viewport：手工确定要放的多大
  • media query：根据设备大小的处理

<meta name="viewport" content="width=device-width" initial-scale=1.0">
//标注：可视区大小等于屏幕大小，适配移动端step 1
//width值可设置，做等比例缩放

@media (max-width:640px){
    .left{
        display:none;
    }
}
....
@media (max-width:640px){
    .intro{
        margin:7px auto;    //发现是移动端设备的时候，做居中处理
        display:block;
    }
}

rem方法-----换算不精准

html{
    font-size:20px
}

@media (max-width:375px){//大屏放上面
    html{
        font-size:24px
    }
}
@media (max-width:320px){
   html{
         font-size:20px
    }
}...
.intro{
    ...
    width:9rem;              //...其他值用rem取代
}

CSS效果

box-shadow             //不占空间的边框

text-shadow

border-radius

clip-path:circle()       //做容器内的动画，不改容器大小

//用矢量工具将图导成svg，svg就把图能抠出来

transform：translateX（...） scale（）

transform-style：preserve-3d；  perspective：500px；


CSS动画

补间动画  transition： width 1s

transition-delay：1s

关键帧动画：

animation: run 1s

@keyframes run{
    0%{
        width:100px
    }
    20%{
        width:500px
    }
    100%{
        width:800px
    }
}

time-function:step(1)



PostCss

css ----> PostCss处理 -----> css

const atImport = require('postcss-import')
const cssnext= require('postcss-cssnext')
const cssnano= require('postcss-cssnano')

module.exports={
    plugins:[
        atImport,
        cssnext,       //实现较先进的属性
        autoprefixed({
            browsers:['>1%']
                       //browsers:['Firefox > 30']
        }),
        cssnano        //css压缩
    ]
}

PostCss需要配合构建工具
webpack postcss-loader
Gulp gulp-postcss
Grunt grunt-postcss
Rollup rollup-postcs


npm i css-loader  style-loader


css权重

css代码存放位置：内嵌样式>内部样式表>外联样式表.

样式选择器:  !important >内嵌样式 > ID >类 > 标签 > 伪类


avatar
文章
阅读
粉丝