New User Special Price Expires in

Let's log you in.

Sign in with Facebook


Don't have a StudySoup account? Create one here!


Create a StudySoup account

Be part of our community, it's free to join!

Sign up with Facebook


Create your account
By creating an account you agree to StudySoup's terms and conditions and privacy policy

Already have a StudySoup account? Login here

Week 10

by: Petey Martin
Petey Martin
GPA 3.25

Preview These Notes for FREE

Get a free preview of these Notes, just enter your email below.

Unlock Preview
Unlock Preview

Preview these materials now for free

Why put in your email? Get access to more of this material and other relevant free materials for your school

View Preview

About this Document

Week 10 of Notes.
Class Notes
25 ?





Popular in ComputerScienence

This 6 page Class Notes was uploaded by Petey Martin on Saturday November 14, 2015. The Class Notes belongs to CSC 209 at University of Rochester taught by KOSTIN R in Summer 2015. Since its upload, it has received 20 views. For similar materials see ADV FRONT END WEB DEVELOPMNT in ComputerScienence at University of Rochester.

Similar to CSC 209 at UR

Popular in ComputerScienence


Reviews for Week 10


Report this Material


What is Karma?


Karma is the currency of StudySoup.

You can buy or earn more Karma at anytime and redeem it for class notes, study guides, flashcards, and more!

Date Created: 11/14/15
Petey Martin Notes (11-9-15)  CSS Preprocessors LESS, SASS, SCSS o CSS Features That Don’t Exist  Variables  Define declarations that don’t get used multiple times.  Mixins  Define multiple properties that get used all at once.  Nesting  Define descendent selectors without having to write all the descendants.  Functions and Operations  Define values that are calculated based on context. o How CSS Preprocessors Work  Generic Answer:  The web developer writes in a special syntax (depending on which flavor) instead of normal CSS.  A script (in the client or on the server) compiles the code into normal CSS ...usually on-demand.  The web browser loads the normal CSS and renders the webpage normally.  Specific Answer: (It depends on which solution you’re using, but the most common is a client-side JavaScript solution, so here’s how Less works...).  Upon HTTP request, everything downloads from the server to the client (the web browser). o HTML o Images o JavaScript – including the less.js script o styles.less  The JavaScript runs – before the page loads, converting the raw Less or SCSS code into normal CSS.  The Web Browser loads the normal CSS into the viewport and displays the webpage normally. o Variables  Less  @pale-green: #4D926F; #header { color: @pale-green; } h2 { color: @pale-green; }  Plain CSS  #header { color: #4D926F; } h2 { color: #4D926F; } o Mixins  Less  .rounded-corners (@radius: 5px) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; } #header { .rounded-corners; } #footer { .rounded-corners(10px); }  Plain CSS  #header { -webkit-border-radius: 5px; -moz-border-radius: 5px; border- radius: 5px; } #footer { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } o Nesting  Less  #header { h1 { font-size: 26px; font-weight: bold; } p { font-size: 12px; a{ text-decoration: none; &:hover { border-width: 1px; } } } } }  Plain CSS  #header h1 { font-size: 26px; font-weight: bold; } #header p { font-size: 12px; } #header p a { text-decoration: none; } #header p a: hover { border-width: 1px; } o Functions and Operations  Less @the-border: 1px; @base-color: #111111; @red: #842210; #header { color: @base-color * 3; border-left: @the-border; border-right: @the-border * 3; } #footer { color: @base-color + #003300; border-color: desaturate(@red, 0%); }  Plain CSS #header { color: #333; border-left: 1px; border-right: 3px; } #footer { color: #114411; border-color: #7d2717; } o Flavors  Less:  Using Less.js to Simplify Your CSS3 (Joshua Johnson) js-to-simplify-your-css3.  SASS:  The Absolute Beginner’s Guide to Sass (Andrew Chalkley) absolute-beginners-guide-to-sass.  Get Sass-y With Your CSS (  Another flavor of SASS: Compass  Comparisons  Difference Between .sass and scss ( between-sass-and-scss.  An introduction to LESS and Sass pre-processed CSS languages ( to-less-and-sass-pre-processed-css-languages.  Scalable Vector Graphics (SVG) o What is SVG  XML-based vector image format for two-dimensional graphics.  Support for interactivity and animation.  SVG images and their behaviors are defined in XML text files.  Open standard developed by the World Wide Web Consortium (W3C) since 1999. o Bitmap Images vs. Vector Images  Bitmap images are composed of a fixed set of pixels.  JPG, GIF, PNG, BMP, TIF.  Vector images are composed of a fixed set of shapes.  SVG.  Scaling bitmaps reveal the pixels.  Scaling the vector image preserves the shapes. o SVG (Scalable Vector Graphics), written in XML (eXtensible Markup Language)  o SVG in the Web Development Industry  Advantages  Tiny files – only lists the lines/curves and shapes that make up the image.  Can be scaled up and down without lose of clarity.  Interfaces with JavaScript to create animated or changeable images.  Disadvantages  Only supported in modern browsers. o See: o Fallbacks are available.  Can’t make overly complex images like photographs. o Writing SVG  <svg> <rect width="200" height="100" fill="#BBC42A" /> <line x1="5" y1="5" x2="100" y2="100" stroke="#765373" stroke-width="8"/> </svg>  Basic Shapes and Paths <rect ...> <circle ...> <ellipse ...> <line ...> <polyline ...> <polygon ...> <path fill="...> ...and many more. o Six ways to use SVG in webpages  As an IMG element in HTML <img src="your-graphic.svg" alt="image description">  As a background image in CSS .element { background-image: url(your- graphic.svg); }  As an SVG element in HTML <svg> <!-- inline svg content --> </svg>  As an HTML EMBED element <embed type="image/svg+xml" src="your- graphic.svg">  As an HTML OBJECT element <object type="image/svg+xml" data="your- graphic.svg"> <!-- fallback here --> </object>  As an HTML IFRAME element <iframe src="your-graphic.svg"> <!-- fallback here --> </iframe> o More information  Scalable Vector Graphics (Wikipedia) s.  Using SVG (Chris Coyier)  Pocket Guide to Writing SVG (Joni Trythall)  Pro tips for using scalable vector graphics (Sara Soueidan) power-svg-61515291.  SVG Workflow for Designers (Dan Mall) designers.


Buy Material

Are you sure you want to buy this material for

25 Karma

Buy Material

BOOM! Enjoy Your Free Notes!

We've added these Notes to your profile, click here to view them now.


You're already Subscribed!

Looks like you've already subscribed to StudySoup, you won't need to purchase another subscription to get this material. To access this material simply click 'View Full Document'

Why people love StudySoup

Steve Martinelli UC Los Angeles

"There's no way I would have passed my Organic Chemistry class this semester without the notes and study guides I got from StudySoup."

Allison Fischer University of Alabama

"I signed up to be an Elite Notetaker with 2 of my sorority sisters this semester. We just posted our notes weekly and were each making over $600 per month. I LOVE StudySoup!"

Jim McGreen Ohio University

"Knowing I can count on the Elite Notetaker in my class allows me to focus on what the professor is saying instead of just scribbling notes the whole time and falling behind."

Parker Thompson 500 Startups

"It's a great way for students to improve their educational experience and it seemed like a product that everybody wants, so all the people participating are winning."

Become an Elite Notetaker and start selling your notes online!

Refund Policy


All subscriptions to StudySoup are paid in full at the time of subscribing. To change your credit card information or to cancel your subscription, go to "Edit Settings". All credit card information will be available there. If you should decide to cancel your subscription, it will continue to be valid until the next payment period, as all payments for the current period were made in advance. For special circumstances, please email


StudySoup has more than 1 million course-specific study resources to help students study smarter. If you’re having trouble finding what you’re looking for, our customer support team can help you find what you need! Feel free to contact them here:

Recurring Subscriptions: If you have canceled your recurring subscription on the day of renewal and have not downloaded any documents, you may request a refund by submitting an email to

Satisfaction Guarantee: If you’re not satisfied with your subscription, you can contact us for further help. Contact must be made within 3 business days of your subscription purchase and your refund request will be subject for review.

Please Note: Refunds can never be provided more than 30 days after the initial purchase date regardless of your activity on the site.