Skip to content

Instantly share code, notes, and snippets.

@webestet

webestet/SassMeister-input-HTML.html

Last active November 26, 2015 13:24
Show Gist options
  • Save webestet/c3ca8f1f9212bc4b5697 to your computer and use it in GitHub Desktop.
Save webestet/c3ca8f1f9212bc4b5697 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<html>
<head></head>
<body></body>
</html>
Raw
SassMeister-input.scss
// ----
// libsass (v3.2.5)
// ----
//FAQ
//обращение к родителю через "&"
//использование @mixin через "@include"
//унаследование свойств одного класса другим через "@extend"
//добавление класса через родителя "&-inner" выведет "menu-inner", если родительский класс "menu"
//плейсхолдеры (классы, которые не компилируются в style.css) используются через "%"
//Variables
$text-color:#373737;//цвет основного текста
$link-color:#c02;//цвет ссылок
$link-hover:darken($link-color,15%);//цвет ссылок при наведении
$font-family:Arial,sans-serif;//семейство шрифтов текста
$font-size:14px;//размер шрифта текста
$title-fs:18px;//размер заголовка текста
$shadow:0px 0px 6px 1px rgba(0,0,0,0.75);//тень вокруг блока
$border-radius:5px;//закругление рамок
//mixin
@mixin border-radius($border-radius){
-webkit-border-radius:$border-radius;
-moz-border-radius:$border-radius;
-o-border-radius:$border-radius;
-ms-border-radius:$border-radius;
}
@mixin box-shadow($shadow){
-webkit-box-shadow:$shadow;
-moz-box-shadow:$shadow;
box-shadow:$shadow;
}
@mixin box-sizing{
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
//placeholder
%a{text-decoration:none;border-bottom:1px solid $link-color;}
/* Intro */
*{margin:0;padding:0;}
html,body{min-width:320px;margin:0;padding:0;height:100%;}
body{font-size:$font-size;font-family:$font-family;color:$text-color;line-height:1.2;}
table{table-layout:fixed;border-collapse:collapse;margin:0 0 20px 0;border:solid 1px #b4ccda;}
table th, table thead td, table thead th {color:#373737;font-weight:bold;}
table td, table th{padding:10px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}
.clear {clear:both;}
img{border:none;outline:none}
#hamburger, #hamb-button {display:none;}
Raw
SassMeister-output.css
/* Intro */
* {
margin: 0;
padding: 0;
}
html, body {
min-width: 320px;
margin: 0;
padding: 0;
height: 100%;
}
body {
font-size: 14px;
font-family: Arial, sans-serif;
color: #373737;
line-height: 1.2;
}
table {
table-layout: fixed;
border-collapse: collapse;
margin: 0 0 20px 0;
border: solid 1px #b4ccda;
}
table th, table thead td, table thead th {
color: #373737;
font-weight: bold;
}
table td, table th {
padding: 10px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.clear {
clear: both;
}
img {
border: none;
outline: none;
}
#hamburger, #hamb-button {
display: none;
}
Raw
SassMeister-rendered.html
<html>
<head></head>
<body></body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment