2019年4月30日 星期二

[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

on 沒有留言:

2019年4月23日 星期二

[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

相關文章：

on 沒有留言:

2019年4月21日 星期日

[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/
on 沒有留言: