cole007/better-css-with-sass

Feedback for the Better CSS with Sass

better-css-with-sass's Issues

“parent selector” is misleading

The term “parent selector” is misleading, especially for beginners. I recommend talking about a “reference to parent”, or something alike.

Fix

Find a more appropriate way to call “parent selector” to avoid any confusion.

Pages (to be completed)

• 25
• 26
• 27
• 28

Wrong file name in Running Sass from the command line

Fix

Change “sass.css.map” into “style.css.map”

Pages (to be completed)

• 16

Bad practice of using global variable in a mixin

Fix

Change:

$base-font-size: 16;
@mixin font-size($size) {
  font-size: $size + px;
  font-size: ($size / $base-font-size) + rem; }

Into:

@mixin font-size($size, $base-font-size: 16) {
  font-size: $size + px;
  font-size: ($size / $base-font-size) + rem; }

Pages

• 40

Missing leading mixin example

Fix

Change:

$mixin mixin-name($variable) {
  output stuff here;
}

Into:

$mixin mixin-name($variable) {
  // output stuff here
}

Pages

• 39

Incorrect link markup about OOCSS

Fix

Change “object oriented CSS” into “object oriented CSS”.

Page

• 70

Bad practice of using underscore in place of hyphen

While both hyphens and underscores are strictly equivalent in Sass, it is considered a bit of a bad practice to use underscore in place of hyphens.

Fix

Change map_get into map-get. Funny thing is you use hyphen starting page 80.

Pages

• 78
• 79

incorrect nesting when explaining BEM

I think you are already aware of this one.

Fix

Change:

.article {
margin: 20px 0;
  &__image {
    width: 40%; }
  &--small {
    width: 20%; }}

Into:

.article {
margin: 20px 0;
  &__image {
    width: 40%;
    &--small {
      width: 20%; }}}

Pages

• 30

Some content should be treated as code

Fix

I believe all of these should be wrapped code tags.

Pages (o be completed)

• 15: “style.scss”
• 15: “.scss”
• 15: “cd”
• 15: “.css”
• 16: “style.css”
• 16: “sass.css.map” (also see #5)
• 16: “.scss” (2 times)
• 16: “Ctrl”
• 16: “c”
• 16: “.css”
• 17: “.scss”
• 39: “em”
• 40: “rem”
• 58: “.scss”
• 80: “$tone”
• 80: “'base'”

Duplicated content in chapter 1

Fix

Remove second occurrence.

Pages

17 and 19.

So we’ve got Sass installed, we know how to convert Sass (or .scss) files into CSS, and we can use our existing CSS, which will process just fine into Sass. But where’s the fun in that? In the next chapter, I will start to look at some of the things we can do in Sass that we can’t do in CSS.

SCSS should be all uppercase

Fix

Change “Scss” in “SCSS”.

Pages (to be completed):

• 10
• 11
• 12

Missing modulo operator

Fix

Change “division (/) and subtraction (-)” into “division (/), subtraction (-) and modulo (%)”.

Pages

• 39

Arguments should be parameters

Parameters are what's in a function signature. Arguments are what's being passed to a function call.

Fix

Change “(called arguments)” into “ (called parameters)”.

Pages (to be completed)

• 39

Sass indented-syntax has no semi-colons

Fix

Change:

.alert-box
  color: #dd0000;
  border: 1px solid #dd0000;

Into:

.alert-box
  color: #dd0000
  border: 1px solid #dd0000

Pages (to be completed)

• 11

Bad practice of not quoting strings

Fix

Quote all strings in Sass.

Pages (to be completed)

• 46
• 47
• 52 (map keys)
• 78 (map keys)
• 79
• 80 (map keys)
• 81

Bad practice with unit

Fix

Do not append the unit directly. Multiple by one member of the unit instead.
See: http://www.sitepoint.com/understanding-sass-units/.

Pages

• 38
• 40
• 41
• 44

Incorrect use of spaces

Fix

Add or remove spaces where needed.

Pages (to be completed)

• 42: “(24/ $size)” -> “(24 / $size)”
• 51: “#{ index($pages, $item)}” -> “#{index($pages, $item)}”
• 51: “#{ $key}” -> “#{$key}”
• 74: “#{ $media}” -> “#{$media}”
• 76: “#{$property }” -> “#{$property}” (2 times)
• 77: “background-color,$red” -> “background-color, $red”
• 77: “rgba (255, 0, 0, 0.75);” -> “rgba(255, 0, 0, 0.75);”
• 79: “$pages,news” -> “$pages, news” (3 times)

colour should be color

Fix

Change “colour” into “color”.

Pages (to be completed)

• 11