Skip to content

Instantly share code, notes, and snippets.

View joesoeph's full-sized avatar

Yusuf Fazeri joesoeph

13 followers · 45 following
View GitHub Profile
@joesoeph
joesoeph / sass-variable
Last active April 18, 2019 20:20
SASS Variable Example
// SASS (SCSS Format)
//*********************************
$font-size: 12px;
body{
font-size: $font-size;
}
//*********************************
// CSS Hasil Compile
//*********************************
@joesoeph
joesoeph / sass-example-syntax
Created April 19, 2019 03:13
SASS Example Syntax
$font-stack: Helvetica, sans-serif
$primary-color: #333
body
font: 100% $font-stack
color: $primary-color
@joesoeph
joesoeph / scss-example-syntax
Created April 19, 2019 03:14
SCSS Example Syntax
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
@joesoeph
joesoeph / scss-nesting-example-input
Created April 19, 2019 03:25
SCSS Nesting Example (Input)
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
@joesoeph
joesoeph / css-example-nesting-output-scss
Created April 19, 2019 03:26
CSS Example Nesting (output SCSS)
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
@joesoeph
joesoeph / scss-example-mixins-input
Created April 19, 2019 03:40
SCSS Example Mixins (Input)
@mixin transform($property) {
-webkit-transform: $property;
-ms-transform: $property;
transform: $property;
}
.box { @include transform(rotate(30deg)); }
@joesoeph
joesoeph / css-example-mixins-output
Created April 19, 2019 03:42
CSS Example Mixins (Output)
.box {
-webkit-transform: rotate(30deg);
-ms-transform: rotate(30deg);
transform: rotate(30deg);
}
@joesoeph
joesoeph / scss-example-extends-input
Created April 19, 2019 03:45
SCSS Example Extends/Inheritance (Input)
/* This CSS will print because %message-shared is extended. */
%message-shared {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.message {
@extend %message-shared;
}
@joesoeph
joesoeph / css-example-extends-output
Created April 19, 2019 03:47
CSS Example Extends (Output)
/* This CSS will print because %message-shared is extended. */
.message, .success, .error, .warning {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.success {
border-color: green;
}
@joesoeph
joesoeph / scss-example-operators-input
Created April 19, 2019 03:49
SCSS Example Operators (Input)
.container {
width: 100%;
}
article[role="main"] {
float: left;
width: 600px / 960px * 100%;
}
aside[role="complementary"] {