Editable stylesheet rendered in html iteself.
A Pen by Sanjay Rohila on CodePen.
name: D8 custom theme | |
type: theme | |
description: 'D8 custom theme' | |
package: Custom | |
core: 8.x | |
# This is comment. |
// ---- | |
// Sass (v3.4.12) | |
// Compass (v1.0.3) | |
// ---- | |
// @crazyrohila | |
// Global colors. | |
$colors: ( | |
dark-gray: rgb(153, 153, 153), | |
hulk: rgb(119, 167, 109), |
Editable stylesheet rendered in html iteself.
A Pen by Sanjay Rohila on CodePen.
// ---- | |
// Sass (v3.4.9) | |
// Compass (v1.0.1) | |
// ---- | |
/** | |
* Color function. | |
*/ | |
// Map to store color as key/values. |
// ---- | |
// Sass (v3.4.9) | |
// Compass (v1.0.1) | |
// ---- | |
// Demo: Maps and Error handling in sass. | |
$colors: ( | |
dark-gray: rgb(153, 153, 153), | |
gray: rgb(204, 204, 204), |
// ---- | |
// Sass (v3.4.9) | |
// Compass (v1.0.1) | |
// ---- | |
// Demo: @at-root and "&" selector | |
// Simple example with @at-root and & selector. | |
ul { | |
display: flex; |
/** | |
* Helper function to check file extension for <input type="file"> element. | |
* @param Array exts An array containing extension to check. eg. ['.png', '.zip']. | |
* @return Boolean returns ture only if all files are matched given extension otherwise returns false. | |
*/ | |
$.fn.hasExtension = function(exts) { | |
var file_list = this[0].files; | |
for (var i = 0, file; file = file_list[i]; i++) { | |
var fileName = file.name; |
// ---- | |
// Sass (v3.4.4) | |
// Compass (v1.0.1) | |
// ---- | |
.block { | |
foo: bar1; | |
@at-root { | |
$ref: &; | |
:not(#{$ref}--modifier) &__elem { |
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<title>JS Bin</title> | |
</head> | |
<body> | |
<script id="jsbin-javascript"> | |
function Person(name) { |
// ---- | |
// Sass (v3.3.14) | |
// Compass (v1.0.0.rc.0) | |
// ---- | |
%header { | |
h2 { | |
color: yellow; | |
} | |
h3 { |