scss 简单的SASS启动文件

Posted 2021-05-18

// Social media fontawesome colors
a .fa-square { color: #fff; }
a .fa-twitter-square, a .fa-twitter { color: #00aced; }
a .fa-facebook-square, a .fa-facebook { color: #3b5998; }
a .fa-youtube-square, a .fa-youtube { color: #bb0000; }
a .fa-google-plus-square, a .fa-google-plus { color: #dd4b39; }
a .fa-linkedin-square, a .fa-linkedin { color: #007bb6; }
a .fa-pinterest-square, a .fa-pinterest { color: #cb2027; }
a .fa-vimeo-square, a .fa-vimeo { color: #aad450; }
a .fa-instagram { color: #517fa4; }

// remove gutters from grid columns
.no-gutter {
	padding-left: 0;
	padding-right: 0;
}
.no-gutter-left {
	padding-left: 0;
}
.no-gutter-right {
	padding-right: 0;
}

// reversed out
.reverse-hdr,
.reverse-link,
.reverse-block,
.reverse-block h1, .reverse-block h2, .reverse-block h3, .reverse-block h4, .reverse-block h5,
.reverse-block .h1, .reverse-block .h2, .reverse-block .h3, .reverse-block .h4, .reverse-block .h5,
.reverse-block a,
.reverse-link:focus,
.reverse-link:hover,
.reverse-block a:focus,
.reverse-block a:hover {
	color: #fff !important;
}

// slightly transparent
.ghost {
	opacity: .6;
}
a.ghost:focus, a.ghost:hover,
a:focus .ghost, a:hover .ghost {
	opacity: 1;
	text-decoration: none;
}

// margins and spacing
.no-margin {
	margin: 0;
}
.no-margin-top {
	margin-top: 0;
}
.no-margin-btm {
	margin-bottom: 0;
}
.append-btm {
	margin-bottom: 2rem;
}
.append-btm-sm {
	margin-bottom: 0.5rem;
}
.append-btm-lg {
	margin-bottom: 3rem;
}
.append-btm-xl {
	margin-bottom: 10rem;
}
.prepend-top {
	margin-top:  2rem;
}
.prepend-top-sm {
	margin-top:  0.5rem;
}
.prepend-top-lg {
	margin-top:  4rem;
}
.prepend-top-xl {
	margin-top:  10rem;
}

// Images
.img-inset-right {
	float: right;
	margin: 3px 0 6px 14px;
}
.img-inset-left {
	float: left;
	margin: 3px 18px 6px 0;
}

// Typography
.smaller {
	font-size: 90%;
	line-height: 1.4;
}
.bigger {
	font-size: 185%;
}
.caps {
	letter-spacing: 1px;
	text-transform: uppercase;
}
.regular {
	font-weight: normal;
}
.bold {
	font-weight: bold;
}

// Insets
.inset-sm { padding: 8px 0.5rem; }
.inset { padding: 0.75rem 1rem; }
.inset-lg { padding: 1.5rem 2rem; }
.inset-xl { padding: 3rem 6rem; }
.inset-left { padding-left: 1rem; }
.inset-left-sm { padding-left: 0.5rem; }
.inset-left-lg { padding-left: 2rem; }
.inset-left-lx { padding-left: 6rem; }
.inset-right { padding-right: 1rem; }
.inset-right-sm { padding-right: 0.5rem; }
.inset-right-lg { padding-right: 2rem; }
.inset-right-xl { padding-right: 6rem; }
.inset-top { padding-top: 1rem; }
.inset-top-sm { padding-top: 0.5rem; }
.inset-top-lg { padding-top: 2rem; }
.inset-top-xl { padding-top: 6rem; }
.inset-btm { padding-bottom: 1rem; }
.inset-btm-sm { padding-bottom: 0.5rem; }
.inset-btm-lg { padding-bottom: 2rem; }
.inset-btm-xl { padding-bottom: 6rem; }

// ============================================
// General elements and typography
// ============================================

html {
	height: 100%;
}

body {
	background-color: #fff;
	color: $color-gray;
	@extend %font-text;
	font-size: 1.8rem;
	height: 100%;
	line-height: 1.75;
}

.lead {
	color: $color-blue;
	font-size: 2.4rem;
	line-height: 1.45;
	margin-bottom: 0.25rem;
}

.jumbotron {
	font-size: 2.6rem;
}

.jumbotron p {
	font-size: inherit;
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5 {
	margin: 0 0 0.5rem 0;
}

h1, .h1, .jumbotron h1, .jumbotron .h1 {
	@extend %font-display;
	@extend %enable-kerning;
	font-size: 6rem;
	line-height: 1.1;
	margin-bottom: 0.25rem;
	text-transform: lowercase;
}

h2, .h2, .jumbotron h2, .jumbotron .h2 {
	@extend %font-display;
	@extend %enable-kerning;
	font-size: 4.6rem;
	line-height: 1;
	margin-bottom: 0.5rem;
	text-transform: lowercase;
}

h3, .h3 {
	font-size: 1.8rem;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 0.12em;
}

h4, .h4 {
	font-size: 1.8rem;
	font-weight: bold;
	letter-spacing: 0;
	text-transform: none;
}

h5, .h5 {
	font-size: 2rem;
	font-style: italic;
}

.hdr-w-accent {
	text-align: center;
}
.hdr-w-accent:after {
	content: '';
	display: block;
	background-color: #222;
	width: 8rem;
	height: 1px;
	margin: 2rem auto;
}
.hdr-w-accent-reverse:after {
	background-color: #fff;
}

p + h1, p + .h1, p + h2, p + .h2, p + h3, p + .h3, p + h4, p + .h4, p + h5, p + .h5,
div + h1, div + .h1, div + h2, div + .h2, div + h3, div + .h3, div + h4, div + .h4, div + h5, div + .h5,
ul + h1, ul + .h1, ul + h2, ul + .h2, ul + h3, ul + .h3, ul + h4, ul + .h4, ul + h5, ul + .h5,
ol + h1, ol + .h1, ol + h2, ol + .h2, ol + h3, ol + .h3, ol + h4, ol + .h4, ol + h5, ol + .h5 {
	margin-top: 1.2em;
}

// ============================================
// Define fonts
// ============================================

%font-text {
	font-family: "futura-pt",sans-serif;
}

%font-display {
	font-family: "futura-pt",sans-serif;
	font-weight: bold;
	letter-spacing: -0.025em;
}

%enable-kerning {
	text-rendering: optimizeLegibility;
  font-feature-settings: "kern";
  -webkit-font-feature-settings: "kern";
  -moz-font-feature-settings: "kern";
  -moz-font-feature-settings: "kern=1";
  font-kerning: normal;
}

// ============================================
// Define colors
// ============================================

$color-gray: #40474a; 		// dark gray
$color-light-gray: #eee; 	// light gray
$color-green: #89cc03; 		// green
$color-green-2: #86cd2f; 	// muted green
$color-blue: #5ec4c8; 		// blue

// include gulp and required node modules
var gulp = require('gulp');
var sass = require('gulp-sass');
var cssnano = require('gulp-cssnano');
var sourcemaps = require('gulp-sourcemaps');

// compile sass
gulp.task('sass', function () {
	gulp.src('./src/sass/site.scss')
	.pipe(sass().on('error', sass.logError))
		.pipe(sourcemaps.init())
		.pipe(cssnano())
		.pipe(sourcemaps.write('.'))
		.pipe(gulp.dest('./css/'));
});

// watch these files
gulp.task('watch', function () {
	gulp.watch(['./src/sass/*.scss', './src/sass/import/*.scss'], ['sass']);
});

// run default task
gulp.task('default', ['sass', 'watch']);

{
  "name": "sass_starter_packages",
  "version": "1.0.0",
  "description": "",
  "main": "gulpfile.js",
  "dependencies": {
    "gulp": "^3.9.0",
    "gulp-sass": "^2.0.4",
    "gulp-sourcemaps": "^1.5.2",
    "gulp-util": "^3.0.6"
  },
  "devDependencies": {
    "gulp-cssnano": "^2.0.0"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Addison",
  "license": "ISC"
}

@import "_variables";
@import "_site";
@import "_helpers";