YiDao YiDaoJ

Review checklist

General

Does the code work?
Description of the project status is included.
Code is easily understand.
Code is written following the coding standarts/guidelines (React in our case).
Code is in sync with existing code patterns/technologies.
DRY. Is the same code duplicated more than twice?

Sass Architecture Structure

sass/
|
|– base/
|   |– _reset.scss       # Reset/normalize
|   |– _typography.scss  # Typography rules
|   ...                  # Etc…
|

Default

Powerlevel10k

⇐ back to the gist-blog at jrw.fi

Advanced SCSS

Or, 16 cool things you may not have known your stylesheets could do. I'd rather have kept it to a nice round number like 10, but they just kept coming. Sorry.

I've been using SCSS/SASS for most of my styling work since 2009, and I'm a huge fan of Compass (by the great @chriseppstein). It really helped many of us through the darkest cross-browser crap. Even though browsers are increasingly playing nice with CSS, another problem has become very topical: managing the complexity in stylesheets as our in-browser apps get larger and larger. SCSS is an indispensable tool for dealing with this.

This isn't an introduction to the language by a long shot; many things probably won't make sense unless you have some SCSS under your belt already. That said, if you're not yet comfy with the basics, check out the aweso

	<div class="row">
	<div id="admin" class="col s12">
	<div class="card material-table">
	<div class="table-header">
	<span class="table-title">Material Datatable</span>
	<div class="actions">
	<a href="#add_users" class="modal-trigger waves-effect btn-flat nopadding"><i class="material-icons">person_add</i></a>
	<a href="#" class="search-toggle waves-effect btn-flat nopadding"><i class="material-icons">search</i></a>
	</div>
	</div>

	const axios = require('axios');
	const fs = require('fs');
	const url = <path_to_file>
	axios({
	method: 'get',
	url: url,
	responseType:'stream'
	})
	.then(res => {
	res.data.pipe(fs.createWriteStream('new.zip'));

	import React, { Component } from 'react';

	import TextField from 'components/base/TextField';

	const WAIT_INTERVAL = 1000;
	const ENTER_KEY = 13;

	export default class TextSearch extends Component {
	constructor(props) {
	super();


	/*
	##Device = Desktops
	##Screen = 1281px to higher resolution desktops
	*/

	@media (min-width: 1281px) {

	/* CSS */

	<!DOCTYPE html>
	<html>
	<head>
	<title>My Iframe</title>
	</head>
	<body>

	<button>Botão</button>

	<script type="text/javascript">

	sass/
	\|
	\|– base/
	\| \|– _reset.scss # Reset/normalize
	\| \|– _typography.scss # Typography rules
	\| ... # Etc…
	\|
	\|– components/
	\| \|– _buttons.scss # Buttons
	\| \|– _carousel.scss # Carousel