หน้าเว็บ

แสดงบทความที่มีป้ายกำกับ less แสดงบทความทั้งหมด
แสดงบทความที่มีป้ายกำกับ less แสดงบทความทั้งหมด

วันเสาร์ที่ 3 พฤษภาคม พ.ศ. 2557

การใช้ netbeans IDE (version 7.4 ขึ้นไป) compile less css

Read more »
เขียนโดย ที่ ไม่มีความคิดเห็น:
ป้ายกำกับ:

วันพฤหัสบดีที่ 9 สิงหาคม พ.ศ. 2555

expression ใน less css 


...
<body>
    <div class="logo-outter">
        <div class="logo-inner">

        </div>
    </div>
<body>
...
Read more »
เขียนโดย ที่ ไม่มีความคิดเห็น:
ป้ายกำกับ:

วันอังคารที่ 7 สิงหาคม พ.ศ. 2555

การเขียน class ซ้อน class ด้วย less css

        ประโยชน์ คือมันช่วยให้งานเราง่ายขึ้นครับ สามารถจัดกลุ่ม จัดลำดับชั้นของการเขียน css ได้ดีขึ้น สบายตาขึ้น  ดูปุ๊ป รู้ปั๊ป ว่า อันไหน เป็นลูกของอันไหน เพราะไม่มีการเขียนซ้ำซ้อน  เหมือนที่เราเขียน css ธรรมดา
#layoutWest-resizer.ui-layout-resizer-west-closed{
    background-color : @grayColor;
    border : solid @grayBorderColor;
    border-width : 0px 1px 0px 0px;
    .round-box(0px, 0px, 0px, 0px);

    #layoutWest-toggler{
        position : relative !important;
        top : 45% !important;
        height : 32px !important;
        width : 32px !important;

        .ui-state-default{
            background : none;
            border : none;
            .box-shadow(0px, 0px, 0px, #fff);

            .ui-icon{
                background-image : url('../images/expand-arrow.png');
                background-position : 0px 0px;
                width : 32px;
                height : 32px;
                position : relative;
                right : 7px;
            }
        }

        .ui-state-default:hover{
            .box-shadow(0px, 0px, 0px, #fff);
            .ui-icon{
                background-image : url('../images/expand-arrow-hover.png');
                background-position : 0px 0px;
                width : 32px;
                height : 32px;
            }
        }
    }
}
        หลังจากนั้น  โค๊ดข้างบนนี้ก็จะถูกคอมไพล์ใหม่ กลายเป็น css ธรรมดา ซึ่ง class ไหนที่ซ้อนกันอยู่ก็จะถูกคอมไพล์เป็นอีกชุดนึง
Read more »
เขียนโดย ที่ ไม่มีความคิดเห็น:
ป้ายกำกับ: ,

วันศุกร์ที่ 20 กรกฎาคม พ.ศ. 2555

ประโยชน์ของ less dynamic css

        ตอนนี้ผมได้ลองใช้ less มาได้ซักระยะนึงแล้วครับ  ผมรู้สึกถูกใจมันมาก  โดยเฉพาะใช้สำหรับแก้ปัญหาในการเขียน css3  ซึ่ง มันยังไม่เป็นมาตรฐาน  ทำให้น่าเบื่อมากๆ  เวลาที่เราต้องมาเขียน css3 เพื่อให้รองรับทุกๆเบราว์เซอร์  ผมเบื่อมาก  ที่ผมจะต้องมาเขียนทุกๆคำสั่ง  ใน ทุกๆที่ที่ผมอยากกำหนดให้มันมีคำสั่งดังกล่าว  ยกตัวอย่างง่ายๆครับ  สำหรับที่ผมเคยใช้  เช่น

ฟังก์ชันเงา
        ในตอนที่ไม่มี less ผมต้องมานั่งเขียนฟังก์ชันเงาของทุกๆค่าที่เป็นไปได้  เช่น  เงาเข้ม  เงาอ่อน  เงาใหญ่  เงาเล็ก  เงาไปทางซ้าย  เงาไปทางขวา  ไปข้างบน  โอ้ย  งานช้างครับ  น่าเบื่อ   นี่ขนาดแค่ฟังก์ชันหรือ class เงาน่ะครับ  เยอะแยะมากมายจนอธิบายไม่ถูก  แล้ว class อื่นๆ อีกล่ะ เช่น การกำหนดความโค้งของรัศมี โค้งมาก โค้งน้อย  ไหนจะเรื่องเบราว์เซอร์อีก  ฟอนต์ ...  มันน่าเบื่อมาก

        จนผมได้มาเจอกับ less ผมก็รู้สึกโล่งใจมากๆครับ  ทุกๆอย่างในแต่ละหน้าที่  class ผมเขียนเป็นฟังก์ชันเดียวหรือ class เดียวเท่านั้น  ไม่ว่าจะเป็น ฟังก์ชันเงาเข้ม เงาอ่อน เงาเล็ก เงาใหญ่ เงาซ้าย ขวา  ก็ว่ากันไป   เขียนแค่ฟังก์ชันเดียว จบครับ  ประมาณแบบนี้
Read more »
เขียนโดย ที่ 1 ความคิดเห็น:
ป้ายกำกับ:

การกำหนดเงาของ element html ด้วย css (less)

less 
/*
less
เงาข้างนอก
*/
.box-shadow (@x : 0px, @y : 0px, @blur : 2px, @color : #ccc){
    /* Chrome */
    -webkit-box-shadow : @x @y @blur @color;
    /* Firefox */
    -moz-box-shadow : @x @y @blur @color;
    /* IE */
    box-shadow : @x @y @blur @color;
}
/*เงาข้างใน*/
.box-shadow (@x : 0px, @y : 0px, @blur : 2px, @color : #ccc){
    /* Chrome */
    -webkit-box-shadow : inset @x @y @blur @color;
    /* Firefox */
    -moz-box-shadow : inset @x @y @blur @color;
    /* IE */
    box-shadow : inset @x @y @blur @color;
}
การเรียกใช้งาน 
div.box{
    background-color : white;
    width : 200px;
    height : 100px;
    .box-shadow(0px, 0px, 2px, #ccc);
}
เขียนโดย ที่ ไม่มีความคิดเห็น:
ป้ายกำกับ: ,

การกำหนดรัศมีของ element html ด้วย css (less)

less 
/*  
less
*/
.round-box (@topRight : 5px, @bottomRight : 5px, @bottomLeft : 5px, @topLeft : 5px){
    /*chrome*/
    -webkit-border-top-right-radius: @topRight;
    -webkit-border-top-left-radius: @topLeft;
    -webkit-border-bottom-right-radius: @bottomRight;
    -webkit-border-bottom-left-radius: @bottomLeft;

    /*Firefox*/
    -moz-border-radius-topright: @topRight;
    -moz-border-radius-topleft: @topLeft;
    -moz-border-radius-bottomright: @bottomRight;
    -moz-border-radius-bottomleft: @bottomLeft;

    /*IE*/
    border-top-right-radius: @topRight;
    border-top-left-radius: @topLeft;
    border-bottom-right-radius: @bottomRight;
    border-bottom-left-radius: @bottomLeft;
}
การเรียกใช้งาน
.round-box (15px, 10px, 0px, 5px);
.round-box (3px, 3px, 3px, 3px);
.round-box; /* 5px for all coner by defult */

div.topic{
    .round-box (3px, 3px, 3px, 3px);
    color : red;
    background-color : yellow;
}
เขียนโดย ที่ ไม่มีความคิดเห็น:
ป้ายกำกับ: ,

การหมุนภาพด้วย css (less)

less 
.rotate(@radius : 45deg){
    -ms-transform:rotate(@radius); /* IE 9 */
    -moz-transform:rotate(@radius); /* Firefox */
    -webkit-transform:rotate(@radius); /* Safari and Chrome */
    -o-transform:rotate(@radius); /* Opera */
}
การเรียกใช้งาน
.rotate(180deg);
.rotate; /* 45deg by defult */
.rotate(-90deg);

div.close{
    background-image : url('../images/close-icon.png');
    background-position : 0px 0px;
    .rotate(45deg);
}
เขียนโดย ที่ ไม่มีความคิดเห็น:
ป้ายกำกับ: ,

วันอาทิตย์ที่ 3 มิถุนายน พ.ศ. 2555

การติดตั้งและใช้งาน less (dynamic css)

มาดูประโยชน์กันครับว่าทำไมผมถึงเลือกใช้ less
1. ผมเจอปัญหาในการกำหนดค่าตัวแปรให้กับ css ซึ่ง css มันไม่สามารถกำหนดตัวแปรได้
2. css มันเขียน function ไม่ได้ แต่ less ทำได้
3. less สามารถดำเนินการ expression + - * / ต่างๆได้
4. css เมื่อมีการแก้ไข  จะต้องทำการรีเฟรชหน้าเว็บเพ็จนั้นๆ  ค่า css จึงจะเปลี่ยนแปลง  แต่  less  ไม่ต้อง  ผมแก้ปุ๊บ  มันเปลี่ยนออโต้เลย  ชอบตรงนี้มากๆครับ(คือ  มันเอา ajax polling มาช่วยในตอน develop ครับ แต่ตอนใช้งานจริงๆ เราจะไม่ใช้)
5. อื่นๆ ผมก็ยังไม่ทราบเหมือนกันครับ  เพราะพึ่่งเป็นมือใหม่  พอดีเจอปัญหาดังที่ได้กล่าวมา  ผมก็เลยตัดสินใจมองหา solution ใหม่  เพื่อที่จะทำให้งานเราเร็วขึ้น  และทำให้การเขียนโค๊ดที่ว่ามันยุ่งยากนั้น  สามารถจัดการได้ง่ายขึ้น  โค๊ดเป็นระเบียบขึ้น  แล้วก็สั้นลงด้วยครับ    หวังว่าคงถูกใจเว็บโปรแกรมเมอร์หลายๆคนที่กำลังมองหาโซลูชั่นใหม่ๆน่ะครับ

1. ดาวน์โหลด less.js จาก site ต่อไปนี้มาครับ  http://lesscss.org/ 
2. แตกไฟล์เก็บไว้ที่ใดที่หนึ่งของ web project
3. include less.js เข้าไปใน <head> ของหน้าเว็บด้วยคำสั่ง
<!-- -->
<script type="text/javascript" src="js/less/less.js"></script>
<!-- -->
4. สั่งให้ less run auto (poll ajax ตลอด  เฉพาะตอน develop เท่านั้น) โดยใช้คำสั่งดังต่อไปนี้ 
<!-- -->
<script type="text/javascript">
    less.watch(); //less start
</script>
<!-- -->
5. เขียน css ที่มีนามสกุลเป็น .less ครับ
Read more »
เขียนโดย ที่ ไม่มีความคิดเห็น:
ป้ายกำกับ:
สมัครสมาชิก: บทความ (Atom)