Difference between revisions of "Sass"

From rbachwiki
Jump to navigation Jump to search
 
(8 intermediate revisions by the same user not shown)
Line 4: Line 4:
.page{
.page{
   @include container;
   @include container;
  // you can use @include container(70%) also when you want to take up only a certain amount of the set container
   }
   }
</pre>
</pre>
* The container size is set in the [[suzy map|Main:Susy_Grid]]
* The container size is set in the [http://wiki.r512.com/index.php/Susy_Grid Suzy Grid]


== Create a mixin where you can pass content ==
== Create a mixin where you can pass content ==


   <pre>
   <pre>
Line 34: Line 33:
border: 3px solid black;
border: 3px solid black;
     // below is a compass function
     // below is a compass function
@include border-radius(12);
@include border-radius(12px);
font-size: 2.5em;
font-size: 2.5em;
padding:10px;
padding:10px;
Line 40: Line 39:
      
      
     </pre>
     </pre>
== Using Mixins ==
== Using Mixins ==


Line 201: Line 201:
Import font
Import font


  @import 'https://fonts.googleapis.com/css?family=Hind+Guntur';
  @import url('https://fonts.googleapis.com/css?family=Nunito');
@import url('https://fonts.googleapis.com/css?family=Slabo+27px');
@import url('https://fonts.googleapis.com/css?family=Raleway');
 
===use fonts ===
 
$headingfont: 'Nunito',sans-serif;
$bodyfont: 'Raleway',sans-serif;
$bodyfont2: 'Slabo 27px',serif;


== Border Box Sizing ==
== Border Box Sizing ==

Latest revision as of 15:53, 29 March 2017

Container

wrapping the entire doc with a class .page or whatever, then in the scss add below
.page{
  @include container;
  // you can use @include container(70%) also when you want to take up only a certain amount of the set container
  }

Create a mixin where you can pass content

    @mixin nameofmixin($width: 420px){
    	@content;
    }
    
    // usefull if you use it as a media query shell
    // whatever content you pass the mixin, it will go between the{}
    // as opposed to just passing arguments 
    @include nameofmixin(){
    height: 300px;
    Color: white;
    
    }
// you can also pass it a parameter
    

Creating Mixins

    @mixin lgtext{
	border: 3px solid black;
    // below is a compass function
	@include border-radius(12px);
	font-size: 2.5em;
	padding:10px;
}
    
    

Using Mixins

    h1, h2 {
 	@include lgtext;
 }
    

Mixins with arguments and default values

    @mixin customBorder($width: 1px, $color: black, $style:solid){
	border:{
	width: $width;
	color:$color;
	style:$style;
	}
}
    
    

Using mixins with arguments

h2{
 	@include customBorder(4px, red, solid);
 }
    


Importing external Files

    @import "_file.scss";
 

Styling All heading tags

    #{headings()} {
	font-family: $font-secondary;
	font-weight: normal ;
	color: $darkgray;
	@include text-shadow($paleryellow 1px 1px) ;
}

Adjust Colors

color:lighten($darkblue, 25);
color:darken($darkblue, 25);

Text Shadow

    @include text-shadow(blue 1px 1px)

Extend a class


   .someclass
    {
    	text-align: center;
    	color: white;
    	border: 3px solid black;
    }
    
    // another Classs
    .anotherclass{
    	@extend .someclass;
    	padding: 10px;
    }
    
    

Place Holders


    %nameofplaceholder{
    transition: all .3s eas-in;
    }
    
    // call transition
    @extend %nameofplaceholder;
    

Using List



    $rainbow: red, orange, yellow, green, blue, indego, violet;
    
    @each $color in $rainbow{
    	.#{color}{
    	background-color: $color;
    }
    
    }
 
   
    
---------------------HTML ------------------
    
     <div class='color red"></div>
    <div class='color orange"></div>
    <div class='color yellow"></div>
    <div class='color green"></div>
    <div class='color blue"></div>
    <div class='color indego"></div>
    
    

List Example

    $categories:(ball, ballet, bosu, cardio, circuit, 
  kettlebell, kickbox, pilates, spinning, step, strength, yoga);
    @each $category in $categories {
  .#{$category}{
    background: $accent url(../images/icon/#{$category}.png) no-repeat;
    @include rounded(8px);
  }
}

  
    
    ------------- HTML -------------
      <ul id="type">
               <li><a href="#" class="ball">Ball Workouts</a></li>
              <li><a href="#" class="ballet">Ballet Barre</a></li>
              <li><a href="#" class="bosu">Bosa</a></li>
              <li><a href="#" class="cardio">Cardio</a></li>
              <li><a href="#" class="circuit">Circuit</a></li>
              <li><a href="#" class="kettlebell">Kettlebell</a></li>
              <li><a href="#" class="kickbox">Kickboxing</a></li>
              <li><a href="#" class="pilates">Pilates</a></li>
              <li><a href="#" class="spinning">Spinning</a></li>
              <li><a href="#" class="step">Step</a></li>
              <li><a href="#" class="strength">Strength</a></li>
              <li><a href="#" class="yoga">Yoga</a></li>
            </ul>
    

Importing Fonts

http://fonts.google.com Import font

@import url('https://fonts.googleapis.com/css?family=Nunito');
@import url('https://fonts.googleapis.com/css?family=Slabo+27px');
@import url('https://fonts.googleapis.com/css?family=Raleway');

use fonts

$headingfont: 'Nunito',sans-serif;
$bodyfont: 'Raleway',sans-serif;
$bodyfont2: 'Slabo 27px',serif;

Border Box Sizing

Include this in your css file and it will take care of all the border box sizing

@include border-box-sizing;

Back To Top- Home - Category