[css/scss] 語法整理如何區別CSS、SCSS和Sass

變數(Variables)

SCSS

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

Sass

$font-stack:    Helvetica, sans-serif
$primary-color: #333

body
  font: 100% $font-stack
  color: $primary-color

CSS

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

巢狀(Nesting)

SCSS

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

Sass

nav
  ul
    margin: 0
    padding: 0
    list-style: none

  li
    display: inline-block

  a
    display: block
    padding: 6px 12px
    text-decoration: none

CSS

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

Mixin

SCSS

@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}
.box { @include transform(rotate(30deg)); }

Sass

=transform($property)
  -webkit-transform: $property
  -ms-transform: $property
  transform: $property
.box
  +transform(rotate(30deg))

CSS

.box {
  -webkit-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}

Extend/Inheritance

SCSS

/* This CSS will print because %message-shared is extended. */
%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

// This CSS won't print because %equal-heights is never extended.
%equal-heights {
  display: flex;
  flex-wrap: wrap;
}

.message {
  @extend %message-shared;
}

.success {
  @extend %message-shared;
  border-color: green;
}

.error {
  @extend %message-shared;
  border-color: red;
}

.warning {
  @extend %message-shared;
  border-color: yellow;
}

Sass

/* This CSS will print because %message-shared is extended. */
%message-shared
  border: 1px solid #ccc
  padding: 10px
  color: #333


// This CSS won't print because %equal-heights is never extended.
%equal-heights
  display: flex
  flex-wrap: wrap


.message
  @extend %message-shared


.success
  @extend %message-shared
  border-color: green


.error
  @extend %message-shared
  border-color: red


.warning
  @extend %message-shared
  border-color: yellow

CSS

/* This CSS will print because %message-shared is extended. */
.message, .success, .error, .warning {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

.error {
  border-color: red;
}

.warning {
  border-color: yellow;
}

運算(Operators)

SCSS

.container {
  width: 100%;
}

article[role="main"] {
  float: left;
  width: 600px / 960px * 100%;
}

aside[role="complementary"] {
  float: right;
  width: 300px / 960px * 100%;
}

Sass

.container
  width: 100%


article[role="main"]
  float: left
  width: 600px / 960px * 100%


aside[role="complementary"]
  float: right
  width: 300px / 960px * 100%

CSS

.container {
  width: 100%;
}

article[role="main"] {
  float: left;
  width: 62.5%;
}

aside[role="complementary"] {
  float: right;
  width: 31.25%;
}

參考資料：
https://sass-lang.com/guide

[Symfony] 如何將專案部屬到Heroku(apache/nginx)

之前寫過一篇『[django] 將Django專案部署到Heroku』，可以參考安裝heroku[官網說明]的方式，『[Symfony] ubuntu18安裝symfony 4.2教學』則可以了解composer和symfony的安裝方式，這篇就不再重複說明。

步驟一、新增Symfony專案

首先新增一個專案 symfony_heroku ，也可以根據需求指定專案版本，目前版本是3.4。

composer create-project symfony/framework-standard-edition symfony_heroku/

# 指定Symfony版本 3.0
composer create-project symfony/framework-standard-edition:^3.0 symfony_heroku/

步驟二、新增Procfile

進到專案目錄裡symfony_heroku/，以apache為例，新增檔案Procfile做為執行網站的依據。

cd symfony_heroku
echo 'web: $(composer config bin-dir)/heroku-php-apache2 web/' > Procfile

相當於：

vim Procfile

檔案Procfile內容：

web: $(composer config bin-dir)/heroku-php-apache2 web/

參數$(composer config bin-dir)是考慮到版本差異，可以動態的指到正確的路徑。

步驟三、部屬專案

使用git將所有檔案加入追蹤並commit。

git init
git add .
git commit -m "initial commit"

輸入指令 heroku login 登入後，建立一個Heroku專案，新增相關設定。

heroku create
heroku config:set SYMFONY_ENV=prod

上傳Heroku

git push heroku master

可以打開瀏覽器就可以看到symfony預設的網頁。

https://[APP_NAME].herokuapp.com

查詢Heroku專案名稱(顯示網址)

heroku open

關閉網頁伺服器

heroku ps:scale web=0

開啟網頁伺服器

heroku ps:scale web=1

[nginx]

假設你希望使用nginx作為網頁伺服器，請將Procfile改成：

web: $(composer config bin-dir)/heroku-php-nginx web/

預設/，沒有任何頁面，請看/app.php確定有沒有建立成功。

https://[APP_NAME].herokuapp.com/app.php

參考資料：
https://devcenter.heroku.com/articles/getting-started-with-symfony
https://devcenter.heroku.com/articles/getting-started-with-php

相關文章：

• Symfony4.2入門教學【第一篇】安裝
• Symfony4.2入門教學【第二篇】建立第一個頁面(Routes)
• Symfony4.2入門教學【第三篇】路由(Routes)
• Symfony4.2入門教學【第四篇】控制器(Controller)
• Symfony4.2入門教學【第五篇】模板(Templates)
• Symfony4.2入門教學【第六篇】設定(Configuration)

[Github] 在github.io建立免費的網站

Github提供免費的方式建立自己的網站，不過只限於靜態的網頁，適合寫個人履歷、部落格或網站作品的分享，設定方法如下：

步驟一、建立Repository

名稱為[USERNAME].github.io，[USERNAME]請填入github的帳戶名稱。

步驟二、新增頁面

用command line方式進行說明

git clone https://github.com/[USERNAME]/[USERNAME].github.io
cd [USERNAME].github.io
vim index.html

內容可以自己決定

<!DOCTYPE html>
<html>
 <head>
  <title>Home</title>
 </head>
 
 <body>
  <h1>Welcome</h1>
  <p>This is my first page.</p>
 </body>
</html>

步驟三、更新

git add index.html
git commit -m "Initial commit"
git push -u origin master

最後打開瀏覽器就可以看到成果囉！

https://[USERNAME].github.io

除了[USERNAME].github.io以外Repository，其他也可以建立一個新的分支(branch)，命名為gh-pages，透過github.io訪問這個專案，同時保持所有的專案維護的方便性。

https://[USERNAME].github.io/[REPO_NAME]

https://pages.github.com/