SASS in HTML-Kit

  • Advertisement ( why? )
     

    Brianran, 21st May 2015 10:43 am

    I want tu try sass, but can I produce sass code( as text) and have Kit transcribe it to CSS.
    I am unclear as to the miniumum requirements are; some quote using programs such as Ruby on Rails to control. Is there any where it clarifies how??

    • HTML-Kit Support, 21st May 2015 12:38 pm

      On 5/21/2015 10:43 AM, Brianran wrote:

      I want tu try sass, but can I produce sass code( as text) and have
      Kit transcribe it to CSS.
      I am unclear as to the miniumum requirements are; some quote using
      programs such as Ruby on Rails to control. Is there any where it
      clarifies how??

      Hi Brianran,

      You don't have to install or configure anything else to edit and convert
      Sassy CSS in HTML-Kit Tools. Just open or create a *.scss file and click
      "Convert to CSS"

      I made a quick video showing how this can be done:

      http://www.htmlkit.com/go/youtube/sassy-css-editing

      Hope this helps!

      Chami

      • Brianran, 21st May 2015 4:39 pm

        I think the word awsome comes to mind.
        I like my coding using HTML-kit and your answer helps me make progress.
        Thanks Brianran

        • Brianran, 22nd May 2015 11:02 am

          I am sorry to come back but I can't get a file to convert. Has this got to written in a SASS program or should the enclosed file which has been typed and saved as below, convert when I press ctrl-enter and choose sass convert.
          scsstest.scss
          nav{
          ul{
          margin: 0;
          padding: 0;
          list-style: none;
          }
          li {display: block; }
          a {
          padding: 6px 12px;
          text-decoration: none;
          }
          }
          I have Scout ready to use but am I missing something
          Brianran

          • HTML-Kit Support, 22nd May 2015 11:33 am

            On 5/22/2015 11:02 AM, Brianran wrote:

            I am sorry to come back but I can't get a file to convert. Has this
            got to written in a SASS program or should the enclosed file which
            has been typed and saved as below, convert when I press ctrl-enter
            and choose sass convert.
            scsstest.scss
            nav{
            ul{
            margin: 0;
            padding: 0;
            list-style: none;
            }
            li {display: block; }
            a {
            padding: 6px 12px;
            text-decoration: none;
            }
            }
            I have Scout ready to use but am I missing something
            Brianran

            Hi Brianran,

            That code should work. If you're converting the whole file
            (scsstest.scss) then I'd use the "Convert to CSS" link on the bottom.
            Ctrl+Enter works as well for in-place conversion but you have to select
            the code first.

            Oh you helped me notice a bug... if there's a syntax error in SCSS the
            converter stops working without showing an error! I'll post a fix for
            this soon. For now, the workaround is to reopen Tools and run the
            converter again after fixing SCSS code.

            Chami

            • Brianran, 22nd May 2015 12:48 pm

              I got tyo work then it stopped and after restating and deleting and reentering the file it worked on both.
              in the Ctrl + m it put the converstion on the bottom of the sas file.
              Brianran

              • Brianran, 1st Jun 2015 6:55 am

                I have loaded version treehouse no 20150325 a
                I still have trouble converting file, but after restart it works onmy first small file.
                but on a bigger attempt as under it will not convert in either sass or scss.
                I have sass-compas-ruby loadwedb ut i am not able to use yet so I was hoping HTML-Kit would be OK.
                Is there an error in this scss/ sass file?

                $font-stack: Helvetica,sans-serif;
                $primary-color; #333;
                @mixin border-radius:($radius) {
                -webkit-border-radius: $radius;
                -moz-border-radius: $radius;
                -ms-border-radius: $radius;
                border-radius: $radius;
                }
                body{
                font:100% $font-stack;
                color: $primary-color;
                }

                box. { @include border-radius(10px); }
                
                • HTML-Kit Support, 1st Jun 2015 2:25 pm

                  Just a couple of typos but your code looks good to me.

                   $primary-color: #333;    (change first ";" to ":")
                  
                   @mixin border-radius($radius) {    (remove ":")
                  
                   .box { @include border-radius(10px); }    (move ".")
                  

                  These are things Tools should catch. Hope to post the new build by mid week.

                  Chami

                  On 6/1/2015 6:55 AM, Brianran wrote:

                  I have loaded version treehouse no 20150325 a
                  I still have trouble converting file, but after restart it works onmy first small file.
                  but on a bigger attempt as under it will not convert in either sass or scss.
                  I have sass-compas-ruby loadwedb ut i am not able to use yet so I was hoping HTML-Kit would be OK.
                  Is there an error in this scss/ sass file?

                  $font-stack: Helvetica,sans-serif;
                  $primary-color; #333;
                  @mixin border-radius:($radius) {
                  -webkit-border-radius: $radius;
                  -moz-border-radius: $radius;
                  -ms-border-radius: $radius;
                  border-radius: $radius;
                  }
                  body{
                  font:100% $font-stack;
                  color: $primary-color;
                  }

                  box. { @include border-radius(10px); }

                  • Brianran, 2nd Jun 2015 4:20 am

                    Your help has got me on the way and it works, but the new build will stop HTMLKit stopping converstion if there is an error.
                    I think I will stick with HTML-Sass conversion for the present MANY thanks.

                    • HTML-Kit Support, 5th Jun 2015 3:17 am

                      On 6/2/2015 4:20 AM, Brianran wrote:

                      Your help has got me on the way and it works, but the new build will
                      stop HTMLKit stopping converstion if there is an error.
                      I think I will stick with HTML-Sass conversion for the present MANY
                      thanks.

                      It took a little longer than I expected but this should now be fixed in
                      TreeHouse build 20150601. As a bonus, any errors will be displayed with
                      a nice in-line message in the source.

                      Chami

                      • Brianran, 5th Jun 2015 3:23 pm

                        Many thanks it works as you suggested and gives a bright yellow warning, just as well as I am having difficulty getting SASS working with Ruby-Compass-Scout. At least I can learn in meanwhile, THANKS
                        brianran