css sass part2 طريقة سهلة للتعرف على

sass part2 طريقة التعامل مع

sass & include & extend & error & mixin & import

في الدرس الاول تعرفنا على كيفية التسطيب البرنامج و بعض الخطوات البسيطة و لكن اليوم سيكون التركيز على كل ما هو جديد و مهم في البرنامج و اخذ في الاعتبار بعض النقط المهمة و سنتعرف على كل ماهو مهم في البرمجة اليومية توكلنا على الله

@import "reset";
$color1: #c3c3c3;
$color2: #000;
$font: 14px;
 
 
.container{
    background: $color1;
    color: $color2;
    font-size: $font;
    header{
        padding: 0;
        margin: 0 auto;
        nav{
            width: 100%;
            ul{
                list-style: none;
                li{
                    display: inline-block;
                    float: left;
                }
            }
        }
    } /* End header */
} // containre
 
.wrapper{
    margin-top: 10px;
    color: $color2;
    background: $color1;
    article{
        @extend .wrapper;
        padding: 5px 10px;
    }
}
 
@mixin space () {
    padding: 10px;
    margin: 5px 10px;
}
 
@mixin lines($lines){
    border: 1px solid $lines;
}
 
@mixin clearfix () {
    &:before,&:after{
        content: "";
        display: tabel;
    }
    &:after{ clear: both; }
}
 
.borders{
    border-top: 1px solid lighten($color2, 10%);
    border-bottom: 1px solid lighten($color2, 20%);
    border-right: 1px solid lighten($color2, 30%);
    border-left: 1px solid lighten($color2, 40%);
}
 
.content{
    div{
        @extend .borders;
        @include space();
        @include lines(#00FF00);
    }
}
 
section{
    div{
        padding: 10px;
        color: $color1;
        &.item1{
            background: #fff000;
        }
        &.item2{
            background: #000fff;
        }
        &.item3{
            border: 1px solid #C3C3C3;
            &:hover{
                border: 1px solid #fff;
            }
        }
    }
}
 
section{
    div{
        // style
        &:first-child{
            //style
        }
        &:last-child{
            //style
        }
        &:nth-child(2){
            //style
        }
    }
}
 
 
 
 
/* media style */
 
@import "media";
  • HTML-CSS
  • sass