markdown 设计师的Sass技巧

Posted 2021-05-05

# Choosing great variable names :
   
   ### Use semantic variable names :
        // Bad
        $red: red;
        $yellow: yellow;

        // Better
        $brand-color: red;
        $accent-color: yellow;
   
   ### Use semantic variable names :      
         // Base colors
        $base-color: #333;
        $brand-color: red;
        $brand-80-color: rgba($color-brand, 0.8);
        $accent-color: yellow;
        
        // Header
        $header-height: 100px;
        $header-background-color: $color-brand;

        // Footer
        $footer-height: 200px;
        $footer-background-color: #aaa;
     
     
# Font Face  Mixins :  
        @mixin font-face($font-family, $url) {
          @font-face {
            font-family: '#{$font-family}';
            src: url('#{$url}.eot');
            src: url('#{$url}.eot?#iefix') format('embedded-opentype'),
              url('#{$url}.woff') format('woff'), url('#{$url}.ttf') format('truetype'),
              url('#{$url}.svg') format('svg');
            font-weight: normal;
            font-style: normal;
          }
        }
    
    
# Convert px to percent :
        example .sidebar{ width : percentage( 360px / 960px ); }
     
     
        
# Convert px to em :
        @function calc-em( $target-px , $context ){
            @return ( $target-px / $context ) * 1em ;
        }
        example : h2 { padding-left : calc-em ( 12px /* padding left on px */ , 32px /* font size */) ;



# Media Queries :
        @mixin respond-to ($media){
            @if $media == small { 
                @media only screen and ( max-width : 320px ) { @content; }  
            }@else if $media == medium { 
                @media only screen and ( min-width : 768px ) { @content; }
            }@else if $medium == large {
                @media only screen and ( min-width : 1024px ) { @content;}  
            }
         }