Skip to content

Instantly share code, notes, and snippets.

@nbkoteshpi

nbkoteshpi/_form.scss

Created January 19, 2017 14:18
Show Gist options
  • Save nbkoteshpi/2e62d57cc1e2254d4f7e175e74fc6002 to your computer and use it in GitHub Desktop.
Save nbkoteshpi/2e62d57cc1e2254d4f7e175e74fc6002 to your computer and use it in GitHub Desktop.
Download ZIP
Sass Examples
Raw
_form.scss
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;
}
}
Raw
index.html
<!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>
Raw
sample.scss
@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