Created
January 19, 2017 14:18
-
-
Save nbkoteshpi/2e62d57cc1e2254d4f7e175e74fc6002 to your computer and use it in GitHub Desktop.
Sass Examples
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
a:link { color: #ed6b15; } | |
a:visited { color:#dd16d0; } | |
a:hover { color: green; } | |
a:active { color: #0dc499; } | |
@mixin linx ($link, $visit, $hover, $active) { | |
a { | |
color: $link; | |
&:visited { | |
color: $visit; | |
} | |
&:hover { | |
color: $hover; | |
} | |
&:active { | |
color: $active; | |
} | |
} | |
} | |
a{@include linx(white, blue, green, red);} | |
a { | |
font-weight: bold; | |
text-decoration: none; | |
&:hover { | |
text-decoration: underline; | |
color:#f28d13; | |
} | |
} | |
.background{background-color:#e5cff7;} | |
.container{ | |
.jumbotron{ | |
@extend .background; | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<title>Introduction to Sass</title> | |
<!-- Latest compiled and minified CSS --> | |
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> | |
<link rel="stylesheet" href="sample.css"> | |
<!-- jQuery library --> | |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> | |
<!-- Latest compiled JavaScript --> | |
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> | |
</head> | |
<body> | |
<nav class="navbar navbar-inverse"> | |
<div class="container-fluid"> | |
<div class="navbar-header"> | |
<a class="navbar-brand" href="#">LOGO</a> | |
</div> | |
<ul class="nav navbar-nav"> | |
<li class="active"><a href="#">Home</a></li> | |
<li><a href="#">About</a></li> | |
<li><a href="#">Contact</a></li> | |
</ul> | |
<ul class="nav navbar-nav navbar-right"> | |
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li> | |
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li> | |
</ul> | |
</div> | |
</nav> | |
<div class="container buttons-inline"> | |
<button type="button" class="btn btn-default">Home</button> | |
<button type="button" class="btn btn-primary">Primary</button> | |
<button type="button" class="btn btn-default">Submit</button> | |
<button type="button" class="btn btn-success">Find</button> | |
<button type="button" class="btn btn-default">Button</button> | |
<button type="button" class="btn btn-default">Danger</button> | |
</div> | |
<article> | |
<h1>Hello World</h1> | |
<div class="container"><input type="textbox" name="input" placeholder="Type the text here.." class="form-control input-box"></div> | |
<p class="sample-paragraph-1">Cat ipsum dolor sit amet, stand in front of the computer screen, so chase imaginary bugs has closed eyes but still sees you caticus cuteicus.</p> | |
<p class="sample-paragraph-2"><a href="#">Drink water out of the faucet chew on cable or if it fits, i sits roll on the floor purring your whiskers off.</a></p> | |
</article> | |
<div class="container"> | |
<ul class="nav nav-tabs"> | |
<li class="active"><a data-toggle="tab" href="#home">Home</a></li> | |
<li><a data-toggle="tab" href="#menu1">Gallery</a></li> | |
<li><a data-toggle="tab" href="#Table">Tables </a></li> | |
<li><a data-toggle="tab" href="#Forms">Forms</a></li> | |
</ul> | |
<div class="tab-content"> | |
<div id="home" class="tab-pane fade in active"> | |
<h3>HOME</h3> | |
<div class="jumbotron"> | |
<h1>SASS Example</h1> | |
<p>Sometimes you’ll write styles for a class that you only ever want to @extend, and never want to use directly in your HTML. This is especially true when writing a Sass library, where you may provide styles for users to @extend if they need and ignore if they don’t. | |
</p> | |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> | |
</div> | |
</div> | |
<div id="menu1" class="tab-pane fade"> | |
<h3>Gallery</h3> | |
<div class="row"> | |
<div class="col-xs-12 col-md-3 "> | |
<div class="thumbnail"> | |
<a href=""> | |
<img src="http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-300mmf_35-56g_ed_vr/img/sample/sample4_l.jpg" alt="Lights" style="width:100%"> | |
<div class="caption"> | |
<p>Beautiful birds</p> | |
</div> | |
</a> | |
</div> | |
</div> | |
<div class="col-xs-12 col-md-3"> | |
<div class="thumbnail"> | |
<a href=""> | |
<img src="https://s-media-cache-ak0.pinimg.com/originals/85/41/4f/85414f220b38d473eda19b7292567661.jpg" alt="Lights" style="width:100%"> | |
<div class="caption"> | |
<p>Beautiful birds</p> | |
</div> | |
</a> | |
</div> | |
</div> | |
<div class="col-xs-12 col-md-3"> | |
<div class="thumbnail"> | |
<a href=""> | |
<img src="http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/sample1_l.jpg" alt="Nature" style="width:100%"> | |
<div class="caption"> | |
<p>Single bird.</p> | |
</div> | |
</a> | |
</div> | |
</div> | |
<div class="col-xs-12 col-md-3"> | |
<div class="thumbnail"> | |
<a href=""> | |
<img src="http://nikonrumors.com/wp-content/uploads/2014/03/Nikon-1-V3-sample-photo.jpg" alt="Fjords" style="width:100%"> | |
<div class="caption"> | |
<p>Nature</p> | |
</div> | |
</a> | |
</div> | |
</div> | |
</div> | |
</div> | |
<div id="Table" class="tab-pane fade"> | |
<h3>Table</h3> | |
<table class="table"> | |
<thead> | |
<tr> | |
<th>Firstname</th> | |
<th>Lastname</th> | |
<th>Email</th> | |
</tr> | |
</thead> | |
<tbody> | |
<tr> | |
<td>Default</td> | |
<td>Defaultson</td> | |
<td>def@somemail.com</td> | |
</tr> | |
<tr class="success"> | |
<td>Success</td> | |
<td>Doe</td> | |
<td>john@example.com</td> | |
</tr> | |
<tr class="danger"> | |
<td>Danger</td> | |
<td>Moe</td> | |
<td>mary@example.com</td> | |
</tr> | |
<tr class="info"> | |
<td>Info</td> | |
<td>Dooley</td> | |
<td>july@example.com</td> | |
</tr> | |
<tr class="warning"> | |
<td>Warning</td> | |
<td>Refs</td> | |
<td>bo@example.com</td> | |
</tr> | |
<tr class="active"> | |
<td>Active</td> | |
<td>Activeson</td> | |
<td>act@example.com</td> | |
</tr> | |
</tbody> | |
</table> | |
</div> | |
<div id="Forms" class="tab-pane fade"> | |
<h3>Form</h3> | |
<form class="inline-block"> | |
<div class="form-group"> | |
<label for="focusedInput">Focused</label> | |
<input class="form-control" id="focusedInput" type="text"> | |
</div> | |
<div class="form-group"> | |
<label for="inputPassword">Disabled</label> | |
<input class="form-control" id="disabledInput" type="text" disabled> | |
</div> | |
<div class="form-group has-success has-feedback"> | |
<label for="inputSuccess2">Input with success</label> | |
<input type="text" class="form-control" id="inputSuccess2"> | |
<span class="glyphicon glyphicon-ok form-control-feedback"></span> | |
</div> | |
<div class="form-group has-warning has-feedback"> | |
<label for="inputWarning2">Input with warning</label> | |
<input type="text" class="form-control" id="inputWarning2"> | |
<span class="glyphicon glyphicon-warning-sign form-control-feedback"></span> | |
</div> | |
<div class="form-group has-error has-feedback"> | |
<label for="inputError2">Input with error</label> | |
<input type="text" class="form-control" id="inputError2"> | |
<span class="glyphicon glyphicon-remove form-control-feedback"></span> | |
</div> | |
</form> | |
</div> | |
</div> | |
</div> | |
<div class="division-1"> | |
<button class="button">Button width 100px</button> | |
<button type="button" class="btn btn-custom">Danger</button> | |
</div> | |
<div class="container"> | |
<div> | |
<h3><a href="#">This is a LINK</a></h3> | |
</div> | |
<div class="well text-center"> <a class="text-center">Copyright@ 2017 all rights reserved</a></div> | |
</div> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@import 'form'; | |
body{ | |
padding:30px; | |
$width: 550px !global; | |
$container-width: 100%; | |
.navbar-inverse{ | |
ul li{color:#420a70;} | |
} //nested | |
article { | |
h2 { | |
font-family: Arial; | |
color: blue; | |
} | |
.sample-paragraph-1 { | |
color: #2a51bf; | |
cursor:pointer; | |
font-size:30px; | |
} | |
.sample-paragraph-2 { | |
color: green; | |
font: { | |
family: fantasy; | |
size: 30px; | |
weight: bold; | |
} | |
&:hover{ | |
@extend .sample-paragraph-1; | |
} | |
} | |
//variables | |
p { | |
$font-size: 12px; | |
$line-height: 30px; | |
font: #{$font-size}/#{$line-height}; | |
} | |
p {background-color:white; | |
color: #010203 + #040506; | |
} | |
} | |
//container | |
.buttons-inline .btn-default{ | |
background-color:#ea8920; | |
color:white; | |
border:0px; | |
border-radius:3px; | |
padding-left:20px; | |
padding-right:20px; | |
} | |
} | |
//variables | |
.division-1{ | |
$width:150px; | |
margin: 20px; | |
.button{ | |
width:$width; | |
&:hover{ | |
background-color:#59bde5; | |
color:white; | |
border-color:#30b2c9; | |
} | |
} | |
} | |
.container { | |
//mixin | |
@mixin center() { | |
background-color:lightgreen; | |
margin-left: auto; | |
margin-right: auto; | |
border:1px solid black; | |
} | |
.input-box{ | |
border-radius: 0px; | |
font-size: 17px; | |
padding: 10px 20px; | |
display: inline-block; | |
outline: 0; | |
@include center; | |
} | |
} | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment