欢迎使用CSDN-markdown编辑器

来源：互联网发布：婵真银杏知乎编辑：程序博客网时间：2024/06/14 16:18

利用less和scss变写一个demo

html

<article>        <div class="module">            <div class="module-top">                <div class="module-top-left">                    <span class="bus-num">418</span>                    <p class="bus-time">首班车5:40  末班车：23:00</p>                </div>                <div class="module-top-right">                    <p class="p-first">龙岗&emsp;- - &emsp;南山</p>                    <p>GangDing&emsp;&emsp;&emsp;&emsp;AoTi</p>                    <p class="p-last">华强北</p>                </div>            </div>            <div class="module-center">                <span>龙岗中路</span><!-- Latest compiled and minified CSS -->                <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">                <span class="three">华强北</span>                <span class="three">华强北</span>                <span>深圳大学</span>                <span class="thre">北京路</span>                <span>深圳大学</span>                <span>深圳大学</span>                <span>南山中路</span>            </div>            <div class="module-bottom">                <p>单一票价&emsp;&emsp;无人售票&emsp;&emsp;主动投币&emsp;&emsp;不舍找零</p>                <span class="span-first"></span>                <span class="span-last"></span>            </div>        </div>    </article>

less

@article_width:700px;@article_height:350px;@main_bg_color:#dedede;@bg_color:green;@font_size:14px;@font_family:"microsoft yahei";// 函数等start      //水平居中    .auto_center(@margin_tb:0){        margin:@margin_tb auto;    }   // 字体设置；   .font_style(@fc:#fff,@fs:@font_size,@ff:@font_family){    color:@fc;    font-size: @fs;    font-family: @ff;   }    // 浮动设置    .float_up(@fu:left){        float: @fu;    }    // display 设置；    .display_set(@d:inline-block){        display: @d;    }    .border_css(@w:1px, @c:red,@s:solid){        border:@arguments;    }    .padding_set(@t:20px,@r:0px,@b:0px,@l:0px){        padding:@arguments;    }// 右三角.triangle-less(top,@w:10px,@c:red){    border-color:transparent transparent transparent @c;}// 匹配所有三角.triangle-less(@_,@w:10px,@c:red){    width:0;    height:0;    border-width:@w;    border-style:solid;}*{    margin:0;    padding:0;    box-sizing:border-box;}article{    width:@article_width;    height:@article_height;    .auto_center(50px);    background-color: @main_bg_color;}.module-top-left{    .float_up();    width:@article_width/2;    height:@article_height/5;    .padding_set();    .bus-num{        .display_set();        .padding_set(10px,50px,10px,50px);        background-color: red;        .font_style(#fff,@font_size*3);    }    .bus-time{        text-indent:1em;        .font_style(#000);    }}.module-top-right{    text-align: center;    height:@article_width/5;    .padding_set();    p{        .font_style(@bg_color);    }    .p-first{        .font_style(@bg_color,@font_size+4px);    }    .p-last{        .font_style(red,@font_size+4px);    }}.module-center{    text-align: center;    background-color: @bg_color;    padding:8px;    span{        .font_style(#fff,@font_size);        width:1em;        line-height: 1.5em;        .display_set();    }    .three{        line-heihgt:2.3em;    }}.module-bottom{    text-align: center;    font-size: 0;    p{        .font_style(#000,@font_size);    }    span{        .display_set();    }    .span-first{        width:@article_width*2/3;        height:5px;        background-color: red;        margin-bottom: 8px;    }    .span-last{        .triangle-less(top);    }}

scss

$article_width:700px;$article_height:350px;$main_bg_color:#dedede;$bg_color:green;$font_size:14px;$font_family:"microsoft yahei";@mixin auto_center($margin_tb:0){    margin: $margin_tb auto;}@mixin font_style($fc:#fff,$fs:$font_size,$ff:$font_family){    color:$fc;    font-size:$fs;    font-family:$ff;}@mixin float_up($fu:left){    float: $fu;}@mixin display_set($d:inline-block){    display: $d;}@mixin border_css($w:1px, $c:red, $s:solid){    border:{        color:$c;        width:$w;        style:$s;    }}@mixin padding_set($t:20px, $r:0px, $b:0px, $l:0px){    padding:{        top:$t;        right:$r;        bottom:$b;        left:$l;    }}@mixin triangle-less($w:10px,$c:red){    width:0;    height:0;    border-width:$w;    border-style:solid;    border-color:transparent transparent transparent $c;}*{    margin:0;    padding:0;    box-sizing:border-box;}article{    width:$article_width;    height:$article_height;    @include auto_center(50px);    background-color:$main_bg_color;}.module-top-left{    @include float_up();    width:$article_width/2;    height:$article_width/5;    @include padding_set();    .bus-num{        @include display_set();        @include padding_set(10px,50px,10px,50px);        background-color:red;        @include font_style(#fff,$font_size*3);    }    .bus-time{        text-indent:1em;        @include font_style(#000);    }}.module-top-right{    text-align:center;    height:$article_width/5;    @include padding_set();    p{        @include font_style($bg_color);    }    .p-first{        @include font_style($bg_color,$font_size+4px);    }    .p-last{        @include font_style(red,$font_size+4px);    }}.module-center{    text-align: center;    background-color: $bg_color;    padding:8px;    span{        @include font_style(#fff,$font_size);        width:1em;        line-height:1.5em;        @include display_set();    }    .three{        line-height:2.3em;    }}.module-bottom{    text-align:center;    font-size:0;    p{        @include font_style(#000,$font_size);    }    span{        @include display_set();    }    .span-first{        width:$article_width*2/3;        height:5px;        background-color:red;        margin-bottom: 8px;    }    .span-last{        @include triangle-less();    }}

阅读全文

0 0