less 加減法注意

@width - @sqWidth;
減號前後一定要空格!!!!

內容有float時外框適應高度

當內容有float時 外框就不會自動感知高度了
此時請服用clearfix
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

在外框的class加上clearfix唷!

wordpress 下其他路徑使用內建functions

假設在theme/library/functions/下
想使用get_bloginfo( 'admin_email' );//等等之程式
請使用作者愚蠢的做法如下
require( $_SERVER['DOCUMENT_ROOT'].'/wp-load.php' ); //目前是用這愚蠢的招式
//然後就可以使用get_bloginfo();了

wordpress 使用 less

STEP1.
下載less.js(http://lesscss.org/)

STEP2.
在你使用的theme裡創建一個library資料夾
在library資料夾再建js與styles資料夾

STEP3

把樣板theme裡的functions.php 加入以下幾行code
注意less版本如果是新版，請將裡面的less-1.3.0.min.js改為你的版本

<?php
// Setting paths to the resources we will need later, js and styles
$path_to_js         = get_stylesheet_directory_uri() . '/library/js/';
$path_to_styles = get_stylesheet_directory_uri() . '/library/styles/';

// We don't want to load unnecessary things when browsing the Dashboard, right?
if ( ! is_admin() ) {

        function load_LESS() {

                // Retrieving the paths we set above
                global $path_to_js, $path_to_styles;

                // Actually printing the lines we need to load LESS in the HEAD
                print "\n<!-- Loading LESS styles and js -->\n";
                print "<link rel='stylesheet/less' id='style-less-css'  href='" . $path_to_styles . "style.less' type='text/css' media='screen, projection' />\n";
                print "<script type='text/javascript' src='" . $path_to_js . "less-1.3.0.min.js'></script>\n\n";
        }

        // Adding the action to the HEAD
        add_action( 'wp_head', 'load_LESS' );

} // END ! is_admin()
?>

在此注意由於css裡使用相對路徑所有 images資料夾都要丟進library/styles/裡
不然就是更改上面的/library/styles/路徑
筆者我本身是改成 get_stylesheet_directory_uri() . '/';


COOL 開始在library裡的styles裡style.less 使用吧!!!

原文出處
http://carlorizzante.com/2011/how-to-implement-less-in-wordpress-first-approach/

讓Dreamweaver也能看懂LESS

不好意思，小弟從以前中毒 阿杜比 很久了，因此總是逃不脫dreamweaver這IDE，如果有人能跟我說哪一款CSS IDE好用的話在下感激不盡。

跟大家分享，假如你也跟我一樣，是想要用Dreamweaver但又想用less的話，我們一起來讓讓Dreamweaver也能看懂LESS吧

只有兩個步驟

step1
win7示範 CS5示範
C:\Users\你的名稱\AppData\Roaming\Adobe\Dreamweaver CS5\zh_TW\Configuration
例如我是
C:\Users\happy\AppData\Roaming\Adobe\Dreamweaver CS5\zh_TW\Configuration

找到Extensions.txt打開後
看到
CSS:Style Sheets改成CSS,LESS:Style Sheets

step2
找到你安裝Dreamweaver的路徑
範例我安裝在D:
D:\Program Files\Adobe\Adobe Dreamweaver CS5\configuration\DocumentTypes
這個文件MMDocumentTypes.xml打開
約142行
找到
 documenttype id="CSS" internaltype="Text" winfileextension="css" macfileextension="css" file="Default.css" writebyteordermark="false" mimetype="text/css"
改成
documenttype id="CSS" internaltype="Text" winfileextension="css,less" macfileextension="css,less" file="Default.css" writebyteordermark="false" mimetype="text/css"


重新啟動Dreamweaver就可以打開.less檔案後編輯儲存拉

CS6多一步
C:\Users\happy\AppData\Roaming\Adobe\Dreamweaver CS6\zh_TW\Configuration\DocumentTypes

這個文件MMDocumentTypes.xml打開
約142行
找到
 documenttype id="CSS" internaltype="Text" winfileextension="css" macfileextension="css" file="Default.css" writebyteordermark="false" mimetype="text/css"
改成
documenttype id="CSS" internaltype="Text" winfileextension="css,less" macfileextension="css,less" file="Default.css" writebyteordermark="false" mimetype="text/css"


原文請參考
http://helpx.adobe.com/dreamweaver/kb/change-add-recognized-file-extensions.html

wordpress 使用在樣板裡的圖片路徑 template_directory

範例:
<?php echo get_bloginfo('template_directory')."/images/go_logo.png"; ?>